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

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