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

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