Selektor potomka
- Data publikacji
- Ostatnio edytowano
Przeznaczenie selektora potomka
selektor selektor { ... }
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
div span {
color:red;
}Wyjaśnienie przykładowej reguły CSS
div span { color:red; }
div span-
do każdego elementu
span, który jest elementem potomkiem elementudiv 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>
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>Rezultat
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"
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"
Interpretacja selektora potomka
-
tak
-
tak
-
tak
-
tak
-
tak
-
tak