Jakiego selektora CSS można użyć do wybrania pierwszego elementu div w innym elemencie div

96

Mam coś takiego:

<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>

Jaki jest selektor css dla drugiego elementu div (pierwszego elementu div w elemencie „content”), tak że mogę ustawić kolor czcionki daty w tym elemencie div?

css css-selectors GregH
źródło
1
Proszę, zaakceptuj odpowiedź najczęściej głosowaną, jest zdecydowanie poprawna.
Barry Michael Doyle

Odpowiedzi:

227

NAJBARDZIEJ PRAWIDŁOWA odpowiedź na twoje pytanie brzmi ...

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

Spowoduje to zastosowanie CSS do pierwszego elementu div, który jest bezpośrednim elementem podrzędnym elementu #content (który może być pierwszym elementem podrzędnym elementu #content, ale nie musi)

Inna opcja:

#content > div:nth-of-type(1) { /* css */ }
Jeremy Moritz
źródło
6
Zgadzam się, że to JEDYNA poprawna odpowiedź na pytanie i należy ją zaakceptować.
Ilya Streltsyn
Czy możesz mi powiedzieć, jak wybrać wszystkie exceptpierwsze / ostatnie div?
Tân
5
@HappyCoding #content > div:not(:last-of-type) { /* css */ }
Jeremy Moritz
@ Tân, jeśli chcesz wszystkie elementy div z wyjątkiem pierwszego ORAZ ostatniego, byłoby to ... #content > div:not(:first-of-type):not(:last-of-type) { /* css */ }
Jeremy Moritz
20

Chcesz

#content div:first-child {
/*css*/
}
Capt Otis
źródło
3
Nie zadziała, ponieważ <div>nie jest pierwszym dzieckiem (to jest <h1>).
Josh Leitzel
Nie wspominając o tym, że w ogóle nie zadziała w IE, nawet jeśli data divbyłaby pierwszym dzieckiem.
Valentin Flachsel
1
Naprawdę? W3 mówi, że będzie tak długo, jak określony jest typ dokumentu. (Szczerze mówiąc, nie wiem.)
Josh Leitzel
3
Po prostu uruchomiłem test, rzeczywiście działa, jeśli podano doctype. Na swoją obronę, nie zdziwiłbym się, gdyby coś zaczęło działać w IE, gdybyś napisał <the_cake_is_a_lie> na początku pliku ...
Valentin Flachsel
1
Zawsze testuję przed wysłaniem odpowiedzi. A ciasto to kłamstwo.
Capt Otis,
16

Jeśli możemy założyć, że H1 zawsze tam będzie, to

div h1+div {...}

ale nie bój się podać identyfikatora div zawartości:

#content h1+div {...}

To prawie tak dobre, jak można teraz uzyskać w różnych przeglądarkach bez uciekania się do biblioteki JavaScript, takiej jak jQuery. Użycie h1 + div gwarantuje, że tylko pierwszy element div po H1 otrzyma styl. Istnieją alternatywy, ale opierają się one na selektorach CSS3 i dlatego nie będą działać w większości instalacji IE.

Stan Rogers
źródło
+1. Nawet o tym nie myślałem. Pamiętaj, że to rozwiązanie nie będzie działać w IE6.
Josh Leitzel
6

Najbardziej zbliżona do tego, czego szukasz, to : pseudoklasa pierwszego dziecka ; niestety to nie zadziała w twoim przypadku, ponieważ masz <h1>przed <div>s. Sugerowałbym, aby dodać klasę do <div>, like, <div class="first">a następnie stylizować ją w ten sposób, lub użyć jQuery, jeśli naprawdę nie możesz dodać klasy:

$('#content > div:first')

Josh Leitzel
źródło
1
misspell - should be$('#content > div.first)
Mateusz Odelga