:first-child
Pasuje do elementu, który jest pierwszym dzieckiem swojego rodzica.
Przykład
#.list li {
padding: 8px 0;
border-top: 1px solid #3f3f46;
}
.list li:first-child {
border-top: 0;
}<ul class="list stage" style="margin: 0; padding: 4px 14px; list-style: none;">
<li>Lekcja 1: selektory</li>
<li>Lekcja 2: pseudoklasy</li>
<li>Lekcja 3: pseudoelementy</li>
</ul>Definicja i zastosowanie
#Pseudoklasa :first-child wybiera element stojący na samym początku swojego rodzica. li:first-child to pierwszy punkt każdej listy na stronie, bo w każdej liście jest jakiś pierwszy punkt. Liczą się tylko elementy, tekst przed nimi nie ma znaczenia.
Najczęstsza pułapka: selektor sprawdza, czy element jest pierwszym dzieckiem w ogóle, a nie pierwszym elementem danego typu. Jeśli w artykule przed pierwszym akapitem stoi nagłówek, p:first-child nie trafi w nic, bo pierwszym dzieckiem jest nagłówek. Do takich przypadków służy :first-of-type, która liczy tylko elementy z tym samym znacznikiem.
Pseudoklasa przydaje się do usuwania zbędnych odstępów i obramowań na brzegach: pierwszy element listy bez górnej kreski, pierwsza karta bez marginesu. :first-child znaczy to samo co :nth-child(1), a jej lustrzanym odbiciem jest :last-child.
Składnia
#selektor:first-child { właściwość: wartość; }Przykładowe selektory
#- Pierwszy punkt listy, bo stoi na samym początku swojego rodzica.
- Nic się nie podświetla: pierwszym dzieckiem artykułu jest
h4, a nie akapit. - Rozwiązanie: pierwszy akapit spośród akapitów, bez względu na nagłówek przed nim.
- Wszystkie punkty oprócz pierwszego. Wygodne do kresek oddzielających kolejne elementy.
Przykładowe selektory w praktyce
#li:first-child
li:first-child { background: #7c3aed; color: #fff; }p:first-child
h4, a nie akapit.p:first-child { background: #7c3aed; color: #fff; }p:first-of-type
p:first-of-type { background: #7c3aed; color: #fff; }li:not(:first-child)
li:not(:first-child) { background: #7c3aed; color: #fff; }Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Zanim użyjesz
p:first-child, sprawdź, co naprawdę stoi na początku rodzica. Często bezpieczniejsze jest:first-of-type. - Dla elementu, który jest jedynym dzieckiem, istnieje
:only-child. Pasuje, gdy element jest jednocześnie pierwszy i ostatni. - Zamiast zerować obramowanie pierwszego elementu, możesz od razu napisać
li + li { border-top: … }alboli:not(:first-child).
Powiązane hasła
#- :last-childPasuje do elementu, który jest ostatnim dzieckiem swojego rodzica.
- :nth-child()Wybiera elementy według pozycji wśród rodzeństwa: co drugi, co trzeci, pierwsze trzy albo wszystkie od siódmego.
- :nth-of-type()Wybiera elementy według pozycji wśród rodzeństwa z tym samym znacznikiem, na przykład co drugi obrazek albo trzeci akapit.
- :not()Wybiera elementy, które nie pasują do podanego selektora ani do żadnego z listy.
- A + BZnak + wybiera element B, który stoi bezpośrednio za elementem A i ma z nim wspólnego rodzica.
Widzisz błąd albo brakuje przykładu? Napisz do nas.