Selektor dziecka odszukuje każdy element HTML, który jest jednym z elementów dzieci elementu HTML odszukanego przez selektor, który podaliśmy przed znakiem > danej reguły CSS.
Selektor dziecka tworzymy co najmniej za pomocą dwóch selektorów CSS, pomiędzy którymi należy umieścić jeden znak > (znak większości) oraz ewentualnie inne białe znaki.
Informacje techniczne o selektorze dziecka
ograniczenie - elementy HTML
brak
ograniczenie - właściwości CSS
brak
Przykładowa reguła CSS, selektor dziecka
Wyjaśnienie przykładowej reguły CSS
div > span
do każdego elementu span, który jest elementem dzieckiem elementu div
color
dodaj właściwość CSS, która zmieni kolor tekstu elementu HTML
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
div > span {
color:red;
}
</style>
</head>
<body>
<div>
tekst znajdujący się w zawartości tego elementu "div" nie jest koloru czerwonego, ponieważ ten element HTML nie jest elementem "span", który byłby elementem dzieckiem elementu "div"
</div>
<div>
<p>
<span>
tekst znajdujący się w zawartości tego elementu "span" nie jest koloru czerwonego, ponieważ ten element HTML jest elementem "span", który jest elementem dzieckiem elementu "p", a nie elementu "div"
</span>
</p>
</div>
<p>
tekst znajdujący się w zawartości tego elementu "p" nie jest koloru czerwonego, ponieważ ten element HTML nie jest elementem "span", który byłby elementem dzieckiem elementu "div"
</p>
<div>
<span>
tekst znajdujący się w zawartości tego elementu "span" jest koloru czerwonego, ponieważ ten element HTML jest elementem "span", który jest elementem dzieckiem elementu "div"
</span>
<hr>
<span>
tekst znajdujący się w zawartości tego elementu "span" jest koloru czerwonego, ponieważ ten element HTML jest elementem "span", który jest elementem dzieckiem elementu "div"
</span>
</div>
</body>
</html>
