Quale selettore CSS può essere utilizzato per selezionare il primo div all'interno di un altro div

95

Ho qualcosa come:

<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 è il selettore CSS per il secondo div (1 ° div all'interno del div "contenuto") in modo tale da poter impostare il colore del carattere della data all'interno di quel div?

css css-selectors

— GregH
fonte

1

Per favore, vai ad accettare la risposta più votata, è decisamente corretta.

— Barry Michael Doyle

224

La risposta PIÙ CORRETTA alla tua domanda è ...

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

Questo applicherà il CSS al primo div che è un figlio diretto di #content (che può essere o meno il primo elemento figlio di #content)

Un'altra opzione:

#content > div:nth-of-type(1) { /* css */ }

— Jeremy Moritz
fonte

6

Concordo sul fatto che è l'UNICA risposta corretta alla domanda e dovrebbe essere accettata.

— Ilya Streltsyn

Puoi dirmi come selezionare tutti i div exceptprimo / ultimo div?

— Tân

4

@HappyCoding #content > div:not(:last-of-type) { /* css */ }

— Jeremy Moritz

@ Tân se vuoi tutti i div tranne il primo E l'ultimo, sarebbe ... #content > div:not(:first-of-type):not(:last-of-type) { /* css */ }

— Jeremy Moritz

20

Tu vuoi

#content div:first-child {
/*css*/
}

— Capt Otis
fonte

3

Non funzionerà perché <div>non è il primo figlio (lo è <h1>).

— Josh Leitzel

Per non parlare del fatto che non funzionerà affatto in IE anche se l'appuntamento divsarebbe il primo figlio.

— Valentin Flachsel

1

Veramente? W3 dice che lo farà fintanto che viene specificato un doctype. (Onestamente non lo so però.)

— Josh Leitzel

3

Ho appena eseguito un test, infatti funziona se è specificato doctype. In mia difesa, non sarei sorpreso se le cose iniziassero a funzionare in IE se digiti <the_cake_is_a_lie> all'inizio del file ...

— Valentin Flachsel

1

Provo sempre prima di pubblicare una risposta. E la torta è una bugia.

— Capt Otis

16

Se possiamo presumere che l'H1 sarà sempre lì, allora

div h1+div {...}

ma non aver paura di specificare l'id del div del contenuto:

#content h1+div {...}

È quanto di meglio puoi ottenere cross-browser in questo momento senza ricorrere a una libreria JavaScript come jQuery. L'uso di h1 + div garantisce che solo il primo div dopo H1 ottenga lo stile. Ci sono alternative, ma si basano su selettori CSS3 e quindi non funzioneranno sulla maggior parte delle installazioni di IE.

— Stan Rogers
fonte

+1. Non ci ho nemmeno pensato. Tieni presente che questa soluzione non funzionerà in IE6.

— Josh Leitzel

6

La cosa più vicina a ciò che stai cercando è la : pseudoclasse primo figlio ; sfortunatamente questo non funzionerà nel tuo caso perché hai un file <h1>prima del <div>s. Quello che suggerirei è di aggiungere una classe a <div>, mi piace <div class="first">e quindi di modellarla in questo modo, o di usare jQuery se davvero non puoi aggiungere una classe:

$('#content > div:first')

— Josh Leitzel
fonte

1

errore ortografico - dovrebbe essere$('#content > div.first)

— Mateusz Odelga