Existe um seletor de CSS apenas para o primeiro filho direto?

315

Eu tenho o seguinte html

<div class="section">
   <div>header</div>
   <div>
          contents
          <div>sub contents 1</div>              
          <div>sub contents 2</div>
   </div>
</div>

E o seguinte estilo:

DIV.section DIV:first-child 
{
  ...
}

Por alguma razão que não entendo, o estilo está sendo aplicado ao "sub conteúdo 1" <div> e ao "cabeçalho" <div> .

Eu pensei que o seletor no estilo se aplicaria apenas ao primeiro filho direto de uma div com uma classe chamada "seção". Como posso alterar o seletor para obter o que quero?

html css css-selectors Jeremy
fonte
3
jsfiddle.net/joelpurra/7t5CK
Joel Purra

Respostas:

519

O que você postou significa literalmente "Encontre quaisquer divs que estejam dentro da seção divs e sejam o primeiro filho de seus pais". O sub contém uma tag que corresponde a essa descrição.

Não está claro para mim se você quer os dois filhos da div principal ou não. Se sim, use o seguinte:

div.section > div

Se você deseja apenas o cabeçalho, use o seguinte:

div.section > div:first-child

Usando as >alterações, a descrição para: "Encontre quaisquer divs que sejam descendentes diretos da seção divs", que é o que você deseja.

Observe que todos os principais navegadores oferecem suporte a esse método, exceto o IE6. Se o suporte ao IE6 for essencial, você precisará adicionar classes aos divs filhos e usá-lo. Caso contrário, não vale a pena se preocupar.

Matchu
fonte
8
: primeiro filho não é necessário, neste caso.
eozzy
3
parece que o OP não está perguntando sobre o seletor tanto quanto por que a regra está sendo aplicada a todos os divs filhos.
Doug Neiner
Minha interpretação é que ele entende o conceito de herança CSS e pensou que o primeiro filho teria o efeito que ele tem. É uma formulação pouco clara.
Matchu 19/01/10
3
Ah, as alegrias de ter idade suficiente para lembrar quando o seletor de "descendente direto" resolveria todos os seus problemas, mas você não poderia usá-lo porque não funcionava no IE . Muita frustração desnecessária se seguiria.
Aroth 26/04
Também se aplica ao primeiro filho do primeiro filho. Se realmente for necessário aplicar as alterações somente no primeiro filho, temos que cancelar as alterações nos filhos da criança. Algo parecido com isto: #div.section > div:first-child > div { /* Cancel Changes*/}
Mahdi J.Ansari # 8/19
51

Encontrei esta pergunta pesquisando no Google. Isso retornará o primeiro filho de um elemento com classe container, independentemente do tipo de filho.

.container > *:first-child
{
}
Tom Gullen
fonte
44

O CSS é chamado de Cascading Style Sheets porque as regras são herdadas. Usando a seguinte seletor, irá selecionar apenas o filho direto do pai, mas suas regras será herdada por que divas crianças 's divs:

div.section > div { color: red }

Agora, isso div e seus filhos serão red. Você precisa cancelar o que definir no pai, se não desejar que ele seja herdado:

div.section > div { color: red }
div.section > div div { color: black }

Agora, apenas aquele solteiro divque é filho direto de div.sectionserá vermelho, mas seus filhos divsainda serão negros.

Doug Neiner
fonte
6 
div.section > div
eozzy
fonte
6

Use div.section > div.

Melhor ainda, use uma <h1>tag para o cabeçalho e div.section h1no seu CSS, para oferecer suporte a navegadores mais antigos (que não conhecem o >) e manter sua marcação semântica.

ЯegDwight
fonte
Boa ideia, infelizmente também preciso oferecer suporte ao IE6 e, se eu usar h1, precisarei definir o tamanho da fonte para herdar, para que a fonte corresponda à do corpo, e ie7 e abaixo não suportem a herança. arg!
Jeremy
Além disso, eu tenho divs filhos e colocar divs filhos em um h1 quebra as regras, mesmo que o IE o processe, não tenho certeza do que outros navegadores fazem.
Jeremy
3

O seletor CSS para o primeiro filho direto no seu caso é:

.section > :first-child

O seletor direto é> e o primeiro seletor filho é: primeiro filho

Não há necessidade de um asterisco antes do: como sugerem outros. Você pode acelerar a pesquisa do DOM modificando esta solução acrescentando a tag:

div.section > :first-child
Matt Parkins
fonte