Selektory elementów - CSS

Selektor potomka

W jaki sposób nadać formatowanie znacznikom potomków znajdującym się wewnątrz innego elementu - przodka?

przodek1 przodek2 ... potomek { cecha: wartość }

gdzie wyrazy "przodek1, przodek2,..." oraz "potomek" (wielokropek należy pominąć!) są selektorami typu, przy czym przodek leży wyżej w hierarchii drzewa dokumentu [zobacz: Wstawianie stylów].

Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu i zostaną opisane w dalszych rozdziałach.

Selektor tego typu pozwala nadać atrybuty elementom, które leżą niżej w hierarchii drzewa dokumentu (zawierają się w innych zewnętrznych znacznikach). Dzięki temu możemy zmienić typ formatowania tylko dla określonych elementów, które są podrzędne w stosunku do innych (przodków). Potomek nie musi leżeć bezpośrednio wewnątrz znacznika przodka. Może być zawarty jeszcze w innych znacznikach, które z kolei zawierają się w rodzicu. Nie jest wtedy konieczne podawanie w deklaracji wszystkich rodziców, a jedynie przodka i potomka.

Selektor taki jest szczególnie przydatny, dla określenia wyglądu odsyłaczy wewnątrz bloku, ponieważ jeśli nie określimy dla nich tzw. pseudoklas odsyłaczowych, nie odziedziczą one formatowania po przodkach.

Przykład

Załóżmy, że w arkuszu stylów strony została umieszczona następująca reguła:

p b { color: red }

Dzięki temu, jeśli wewnątrz znacznika p (akapit) znajdzie się znacznik b (czyli pogrubienie tekstu), to zostanie on automatycznie napisany czcionką koloru czerwonego:

To jest akapit, a to jest pogrubienie (czerwone), umieszczone wewnątrz tego akapitu oraz wewnątrz znacznika tekstu pochylonego. A to jest pogrubienie (czerwone) bezpośrednio w akapicie, które nie zawiera się w znaczniku pochylenia.

Zwróć uwagę, że pogrubienie (potomek) nie musi znajdować się bezpośrednio w akapicie (przodek).

p i b  { color: red }

To jest akapit, a to jest pogrubienie (czerwone), umieszczone wewnątrz tego akapitu oraz wewnątrz znacznika tekstu pochylonego. A to jest pogrubienie (nie powinno być czerwone) bezpośrednio w akapicie, które nie zawiera się w znaczniku pochylenia.

Inny przykład:

ol ul { color: red }

Taka deklaracja spodowuje, że każdy wykaz typu wypunktowanie (ul), który znajdzie się wewnątrz wykazu numerowanego (ol), będzie miał automatycznie nadany kolor czerowny:

<ol>
<li>Punkt pierwszy
	<ul>
	<li>Podpunkt pierwszy</li>
	<li>Podpunkt drugi</li>
	</ul>
</li>
<li>Punkt drugi</li>
</ol>

Punkt pierwszy
- Podpunkt pierwszy
- Podpunkt drugi
Punkt drugi

Dla porównania żaden z poniższych wykazów nie będzie czerwony:

<ul>
<li>Punkt pierwszy
	<ul>
	<li>Podpunkt pierwszy</li>
	<li>Podpunkt drugi</li>
	</ul>
</li>
<li>Punkt prugi
	<ol>
	<li>Podpunkt pierwszy</li>
	<li>Podpunkt drugi</li>
	</ol>
</li>
<li>Punkt trzeci</li>
</ul>

Punkt pierwszy
- Podpunkt pierwszy
- Podpunkt drugi
Punkt prugi
1. Podpunkt pierwszy
2. Podpunkt drugi
Punkt trzeci

Pytania i odpowiedzi

Na czym polega selektor potomka?

Selektor potomka w CSS służy do wybierania elementów potomnych, czyli elementów znajdujących się wewnątrz określonych elementów nadrzędnych. Selektor potomka jest zapisywany jako kombinacja nazw elementów oddzielonych spacją.

Jak wybrać wszystkie elementy P wewnątrz elementu DIV?

Aby wybrać wszystkie elementy <p> znajdujące się wewnątrz elementu <div>...</div>, można użyć selektora potomka. Na przykład: div p zastosowany w regule CSS spowoduje, że zostaną wybrane wszystkie akapity wewnątrz kontenerów.

Komentarze

Zobacz więcej komentarzy