Qual seletor de CSS pode ser usado para selecionar o primeiro div dentro de outro div

95

Eu tenho algo como:

<div id="content>

   <h1>Welcome to Motor City Deli!</h1>
   <div style=" font-size: 1.2em; font-weight: bolder;">Sep 19, 2010</div>
   <div > ... </div>

Qual é o seletor de css para a segunda div (1ª div dentro da div "content") para que eu possa definir a cor da fonte da data dentro dessa div?

css css-selectors GregH
fonte
1
Por favor, aceite a resposta mais votada, é definitivamente correta.
Barry Michael Doyle

Respostas:

224

A resposta MAIS CORRETA à sua pergunta é ...

#content > div:first-of-type { /* css */ }

Isso aplicará o CSS ao primeiro div que é filho direto de #content (que pode ou não ser o primeiro elemento filho de #content)

Outra opção:

#content > div:nth-of-type(1) { /* css */ }
Jeremy Moritz
fonte
6
Concorde que é a ÚNICA resposta correta à pergunta e deve ser aceita.
Ilya Streltsyn
Você pode me dizer como selecionar todas as div exceptprimeira / última div?
Tân
4
@HappyCoding #content > div:not(:last-of-type) { /* css */ }
Jeremy Moritz
@ Tân se você quiser todos os divs exceto o primeiro E o último, seria ... #content > div:not(:first-of-type):not(:last-of-type) { /* css */ }
Jeremy Moritz
20

Você quer

#content div:first-child {
/*css*/
}
Capitão Otis
fonte
3
Não vai funcionar porque <div>não é o primeiro filho (é <h1>).
Josh Leitzel
Sem mencionar que não funcionará no IE, mesmo que a data divseja o primeiro filho.
Valentin Flachsel
1
Realmente? W3 diz que vai, desde que um doctype seja especificado. (Eu, honestamente, não sei.)
Josh Leitzel
3
Apenas executei um teste, de fato ele funciona se doctype for especificado. Em minha defesa, eu não ficaria surpreso se as coisas começassem a funcionar no IE se você digitar <the_cake_is_a_lie> no início do arquivo ...
Valentin Flachsel
1
Sempre faço um teste antes de postar uma resposta. E o bolo é uma mentira.
Capitão Otis
16

Se pudermos supor que o H1 sempre estará lá, então

div h1+div {...}

mas não tenha medo de especificar o id do div de conteúdo:

#content h1+div {...}

Isso é tão bom quanto você pode obter cross-browser agora, sem recorrer a uma biblioteca JavaScript como jQuery. Usar h1 + div garante que apenas o primeiro div após o H1 obtenha o estilo. Existem alternativas, mas elas contam com seletores CSS3 e, portanto, não funcionarão na maioria das instalações do IE.

Stan Rogers
fonte
+1. Nem pensei nisso. Lembre-se de que essa solução não funcionará no IE6.
Josh Leitzel
6

A coisa mais próxima do que você está procurando é a : pseudoclasse do primeiro filho ; infelizmente isso não funcionará no seu caso porque você tem um <h1>antes do <div>s. O que eu sugeriria é que você adicione uma classe ao <div>, curtir <div class="first">e depois estilize-a dessa forma, ou use jQuery se você realmente não puder adicionar uma classe:

$('#content > div:first')

Josh Leitzel
fonte
1
erro de ortografia - deveria ser$('#content > div.first)
Mateusz Odelga