Selektor potomka odszukuje każdy element HTML, który jest jednym z elementów potomków elementu HTML odszukanego przez selektor, który podaliśmy przed znakiem spacji danej reguły CSS.
Selektor potomka tworzymy co najmniej za pomocą dwóch selektorów CSS, pomiędzy którymi należy umieścić przynajmniej jeden biały znak (zazwyczaj znak spacji).
Informacje techniczne o selektorze potomka
ograniczenie - elementy HTML
brak
ograniczenie - właściwości CSS
brak
Przykładowa reguła CSS, selektor potomka
Wyjaśnienie przykładowej reguły CSS
div span
do każdego elementu span, który jest elementem potomkiem elementu div
color
dodaj właściwość CSS, która zmieni kolor tekstu elementu HTML
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>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 potomkiem elementu "div"
</div>
<div>
<p>
<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 "p", który z kolei jest elementem dzieckiem elementu "div", dlatego ten element "span" jest również elementem potomkiem wspomnianego 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 potomkiem 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", dlatego ten element "span" jest również elementem potomkiem wspomnianego elementu "div"
</span>
</div>
</body>
</html>
