Czy istnieje selektor CSS tylko dla pierwszego bezpośredniego dziecka?

315

Mam następujący HTML

<div class="section">
   <div>header</div>
   <div>
          contents
          <div>sub contents 1</div>              
          <div>sub contents 2</div>
   </div>
</div>

I następujący styl:

DIV.section DIV:first-child 
{
  ...
}

Z jakiegoś powodu, dla którego nie rozumiem, styl jest stosowany do „zawartości podrzędnej 1”, <div> a także do „nagłówka” <div> .

Pomyślałem, że selektor stylu będzie miał zastosowanie tylko do pierwszego bezpośredniego potomka div z klasą o nazwie „section”. Jak mogę zmienić wybierak, aby uzyskać to, czego chcę?

Jeremy
źródło

Odpowiedzi:

519

To, co opublikowałeś, dosłownie oznacza „Znajdź divy, które są wewnątrz div div sekcji i są pierwszymi potomkami ich rodziców”. Sub zawiera jeden tag, który pasuje do tego opisu.

Nie jest dla mnie jasne, czy chcesz oboje dzieci z głównej dywizji, czy nie. Jeśli tak, użyj tego:

div.section > div

Jeśli chcesz tylko nagłówek, użyj tego:

div.section > div:first-child

Za pomocą >zmian zmienia się opis: „Znajdź dowolne divy, które są bezpośrednimi potomkami div div sekcji”, co jest tym, czego chcesz.

Należy pamiętać, że wszystkie główne przeglądarki obsługują tę metodę, z wyjątkiem IE6. Jeśli obsługa IE6 ma kluczowe znaczenie dla misji, będziesz musiał dodać klasy do potomnych div i użyć ich zamiast tego. W przeciwnym razie nie warto się tym przejmować.

Matchu
źródło
8
: w tym przypadku pierwsze dziecko nie jest wymagane.
eozzy
3
wygląda na to, że OP nie pyta o selektor tak bardzo, dlaczego reguła jest stosowana do wszystkich div div.
Doug Neiner,
Moja interpretacja jest taka, że ​​rozumie dziedziczenie CSS i myślał, że pierwsze dziecko będzie miało taki efekt, jaki ma. To raczej niejasne sformułowanie.
Matchu,
3
Ach, radość z bycia wystarczająco dorosłym, by pamiętać, kiedy selektor „bezpośredniego potomka” rozwiązałby wszystkie twoje problemy, ale nie mogłeś go użyć, ponieważ nie działał w IE . Nastąpiłoby wówczas wiele niepotrzebnej frustracji.
aroth
Dotyczy to również pierwszego dziecka pierwszego dziecka. Jeśli naprawdę trzeba zastosować zmiany tylko do pierwszego dziecka, musimy anulować zmiany dotyczące dzieci dziecka. Coś w tym stylu:div.section > div:first-child > div { /* Cancel Changes*/}
Mahdi J.Ansari
51

Znalazłem to pytanie podczas wyszukiwania w Google. Zwróci to pierwsze dziecko elementu z klasą container, niezależnie od tego, jaki typ jest to dziecko.

.container > *:first-child
{
}
Tom Gullen
źródło
44

CSS nazywa się kaskadowymi arkuszami stylów, ponieważ reguły są dziedziczone. Stosując następujący selektor, będą wybierać tylko bezpośrednie dziecko rodzica, ale jego przepisy będą dziedziczone przez że div„s dzieci divs:

div.section > div { color: red }

Teraz zarówno to, jak div i jego dzieci będą red. Musisz anulować wszystko, co ustawisz na rodzicu, jeśli nie chcesz, aby dziedziczyło:

div.section > div { color: red }
div.section > div div { color: black }

Teraz tylko ten singiel, divktóry jest bezpośrednim dzieckiem, div.sectionbędzie czerwony, ale jego dzieci divsbędą nadal czarne.

Doug Neiner
źródło
6
div.section > div
eozzy
źródło
6

Zastosowanie div.section > div.

Co więcej, użyj <h1>znacznika dla nagłówka i div.section h1w swoim CSS, aby obsługiwać starsze przeglądarki (które nie wiedzą o tym >) i utrzymywać znaczniki semantyczne.

ЯegDwight
źródło
Dobry pomysł, niestety muszę również obsługiwać IE6, a jeśli użyję h1, będę musiał ustawić rozmiar czcionki, aby dziedziczyć, aby czcionka była zgodna z treścią, a więc 7 i poniżej nie obsługują dziedziczenia. arg!
Jeremy
Poza tym mam divy dla dzieci i umieszczenie div dla dzieci w h1 łamie reguły, mimo że IE je renderuje, nie jestem pewien, co robią inne przeglądarki
Jeremy
3

Selektor CSS dla bezpośredniego pierwszego dziecka w twoim przypadku to:

.section > :first-child

Bezpośrednim selektorem jest>, a pierwszym selektorem potomnym jest: first-child

Nie ma potrzeby używania gwiazdki przed: jak sugerują inni. Możesz przyspieszyć wyszukiwanie DOM, modyfikując to rozwiązanie, przygotowując tag:

div.section > :first-child
Matt Parkins
źródło