: pierwsze dziecko nie działa zgodnie z oczekiwaniami

99

Próbuję wybrać pierwszą h1wewnątrz a divz klasą o nazwie detail_container. Działa, jeśli h1jest pierwszym elementem w tym div, ale jeśli pojawi się później ul, nie zadziała.

<style type="text/css">
.detail_container h1:first-child
{
color:blue;
} 
</style>
</head>
<body>
<div class="detail_container">
    <ul>
    <li></li>
    <li></li>
    </ul>
    <h1>First H1</h1>
    <h1>Second H1</h1>
</div>
</body>
</html>

Miałem wrażenie, że CSS, który mam, wybierze pierwszy h1bez względu na to, gdzie się w tym znajduje div. Jak mogę to zrobić?

css css-selectors

— The Muffin Man
źródło

1

Cokolwiek CSS nie może zrobić, JavaScript może.

— JCOC611

11

To jest coś, co możesz zrobić z CSS3 :)

— BoltClock

222

Te h1:first-childśrodki wybierające

Wybierz pierwsze dziecko swojego rodzica
wtedy i tylko wtedy, gdy jest h1elementem.

:first-childPojemnika tu jest ul, i jako takie mogą nie spełniaćh1:first-child .

:first-of-typeDla twojego przypadku są CSS3 :

.detail_container h1:first-of-type
{
    color: blue;
}

Ale z problemami ze zgodnością przeglądarek i innymi rzeczami, lepiej dać pierwszą h1klasę, a następnie skierować ją na tę klasę:

.detail_container h1.first
{
    color: blue;
}

— BoltClock
źródło

2

Teraz rozumiem, chociaż myślę, że powinni byli wdrożyć obie wersje, kiedy tworzyli standard.

— The Muffin Man

Nie działa w wersji IE9. Jest tam napisane h1: nieznane w narzędziu deweloperskim

— Cine

11

Lista kompatybilności z :first-of-typeselektora.

— Jess Telford

4

Nowszy lista kompatybilności z :first-of-type. Stary link jest nieprawidłowy.

— BadHorsie

Moim zdaniem ten termin :first-childnie jest jasny do zrozumienia, ponieważ definiujesz element jako, powiedzmy h1, selektor CSS , a następnie myślisz „weź pierwsze dziecko” ze wszystkich na wybranym poziomie DOM. Tyle razy źle to wykorzystałem ... Musimy przyzwyczaić się do :first-of-typeselektora i pomyśleć o pierwszym dziecku tego typu.

— Kai Noack

15

:first-childwybiera pierwszy h1 wtedy i tylko wtedy, gdy jest pierwszym dzieckiem swojego elementu nadrzędnego. W twoim przykładzie uljest pierwszym dzieckiemdiv .

Nazwa pseudoklasy jest nieco myląca, ale jest tutaj dość jasno wyjaśniona w spec.

:firstSelektor jQuery daje Ci to, czego szukasz. Możesz to zrobić:

$('.detail_container h1:first').css("color", "blue");

— Rob Sobers
źródło

Twoje prawo jest mylące, głównie byłem zdezorientowany, ponieważ wcześniej używałem jQuery do tego.

— The Muffin Man

9

W tym konkretnym przypadku możesz użyć:

.detail_container > ul + h1{ 
    color: blue; 
}

Ale jeśli potrzebujesz tego samego selektora w wielu przypadkach, powinieneś mieć dla nich klasę, jak powiedział BoltClock.

— Grekz
źródło

Nie powinieneś mieć żadnych problemów. Tutaj ref w3.org/TR/CSS2/selector.html#child-selectors

— Grekz

6

możesz także użyć

.detail_container h1:nth-of-type(1)

Zmieniając cyfrę 1 na dowolną inną liczbę, można wybrać dowolną inną pozycję h1.

— Fabrice
źródło

1

Możesz zawinąć swoje h1tagi w inny, diva pierwszym z nich będzie first-child. To divnawet nie wymaga stylów. To tylko sposób na oddzielenie tych dzieci.

<div class="h1-holder">
    <h1>Title 1</h1>
    <h1>Title 2</h1>
</div>

— GhostToast
źródło

0

Element nie może bezpośrednio dziedziczyć po <body>tagu. Możesz spróbować umieścić go w <dir style="padding-left:0px;"></dir>tagu.

— Edmond Chow
źródło