Przejdź do treści

Selektory elementów

Selektor potomka

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>
  1. Punkt pierwszy
    • Podpunkt pierwszy
    • Podpunkt drugi
  2. 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

Zobacz także

Komentarze

Zobacz więcej komentarzy