:first-child
- Data publikacji
- Ostatnio edytowano
Zobacz również: w3.org - the :first-child pseudo-class (LV3)
Przeznaczenie selektora :first-child
:first-child { ... }
Selektor :first-child odwołuje się do każdego elementu HTML, którego cechy w danym momencie spełniają zasadę pseudoklasy :first-child.
Cechy elementu HTML spełniają zasadę pseudoklasy :first-child, gdy w danym momencie dany element HTML jest pierwszym elementem dzieckiem swojego elementu rodzica.
Informacje techniczne o selektorze :first-child
- ograniczenie - elementy HTML
-
brak
- ograniczenie - właściwości CSS
-
brak
Przykładowa reguła CSS, selektor :first-child
p:first-child {
color:red;
}Wyjaśnienie przykładowej reguły CSS
p:first-child { color:red; }
p:first-child-
do każdego elementu
p, który jest pierwszym elementem dzieckiem swojego elementu rodzica color-
dodaj właściwość CSS, która zmieni kolor tekstu elementu HTML
red-
na barwę czerwoną
Kod źródłowy przykładowego dokumentu HTML
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
p:first-child {
color:red;
}
</style>
</head>
<body>
<div>
<p>
tekst znajdujący się w zawartości tego elementu "p" jest koloru czerwonego, ponieważ ten element "p" jest pierwszym elementem dzieckiem swojego elementu rodzica
</p>
<p>
tekst znajdujący się w zawartości tego elementu "p" nie jest koloru czerwonego, ponieważ ten element "p" nie jest pierwszym elementem dzieckiem swojego elementu rodzica, lecz jest drugim
</p>
</div>
<hr>
<div>
<div>
tekst znajdujący się w zawartości tego elementu "div" nie jest koloru czerwonego, mimo że ten element HTML jest pierwszym elementem dzieckiem swojego elementu rodzica, ponieważ ten element HTML nie jest elementem "p"
</div>
<p>
tekst znajdujący się w zawartości tego elementu "p" nie jest koloru czerwonego, ponieważ ten element "p" nie jest pierwszym elementem dzieckiem swojego elementu rodzica, lecz jest drugim
</p>
</div>
</body>
</html>Rezultat
tekst znajdujący się w zawartości tego elementu "p" jest koloru czerwonego, ponieważ ten element "p" jest pierwszym elementem dzieckiem swojego elementu rodzica
tekst znajdujący się w zawartości tego elementu "p" nie jest koloru czerwonego, ponieważ ten element "p" nie jest pierwszym elementem dzieckiem swojego elementu rodzica, lecz jest drugim
tekst znajdujący się w zawartości tego elementu "p" nie jest koloru czerwonego, ponieważ ten element "p" nie jest pierwszym elementem dzieckiem swojego elementu rodzica, lecz jest drugim
Interpretacja selektora :first-child
-
tak
-
tak
-
tak
-
tak
-
tak
-
tak