Selektory element≤w

[ aktualizacja 21.12.2000 ]

Kilka wa┐nych pojΩµ:

Drzewo dokumentu (document tree) - hierarchiczny uk│ad element≤w HTML zakodowanych w dokumencie; ka┐dy element ma dok│adnie jednego rodzica, opr≤cz elementu najwy┐szego w hierarchii.
Dziecko (child) - element bΩd▒cy o jeden szczebel ni┐ej w drzewie w stosunku do danego elementu.
Potomek (descendant) - element bΩd▒cy o jeden lub wiΩcej szczebli ni┐ej w drzewie w stosunku do danego elementu.
Rodzic (parent) - element o jeden szczebel wy┐ej w drzewie w stosunku do danego elementu.
Przodek (ancestor) - element bΩd▒cy o jeden lub wiΩcej szczebli wy┐ej w drzewie w stosunku do danego elementu.
Brat (sibling) - element maj▒cy tego samego rodzica co inny element; je╢li znajduje siΩ obok niego, to jest to brat przylegaj▒cy (adjacent sibling).

Przyk│adowe drzewo:

¼r≤d│o: Cascading Style Sheets, level 2 - CSS2 Specification

a. Selektor prosty

Selektor ten zosta│ opisany na pocz▒tku rozdzia│u.

b. Selektor uniwersalny

Warto╢ci og≤lne (uniwersalne) mo┐na przypisywaµ dokumentowi na najwy┐szym poziomie, czyli w BODY, ale mo┐na tak┐e stosowaµ tzw. selektory uniwersalne, oznaczane gwiazdk▒.

Selektor o postaci:

* {color:#FF0000; font-weight:bold}

spowoduje, ┐e ca│y tekst (w akapitach, wykazach, tabelach itd.) bΩdzie wy╢wietlany jako pogrubiony i w czerwonym kolorze.

Z kolei selektor

*.klasa1 {font-family:Verdana}

spowoduje, ┐e wszystkie elementy opatrzone klas▒ o nazwie klasa1 bΩd▒ wy╢wietlane za pomoc▒ czcionki Verdana.

akapit z klas▒ "klasa1" - czcionka Verdana 15 pt

Interpretacja: Internet Explorer, Netscape 6, Opera 5.

c. Selektor potomka (descendant selector)

Selektor potomka (w CSS1 jest to selektor kontekstowy) pozwala nadawaµ styl tym elementom, kt≤re maj▒ okre╢lonych przodk≤w. Na przyk│ad:

H1 I {color:red}

Oznacza to, ┐e je╢li fragment tytu│u stopnia pierwszego bΩdzie przedstawiony za pomoc▒ czcionki pochylonej, to automatycznie zyska on tak┐e czerwony kolor, np.

To jest tytu│ pierwszego stopnia

Podobnie, definicja

UL UL LI {color:green}

spowoduje, ┐e elementy wykazu na drugim poziomie zagnie┐d┐enia bΩd▒ przedstawione w zielonym kolorze, podczas gdy elementy wykazu pierwszego poziomu bΩd▒ mia│y domy╢lny kolor, np.

punkt 1
punkt 2
- punkt 2.1
- punkt 2.2
punkt 3

Interpretacja: Internet Explorer, Netscape 6, Opera 5.

Zauwa┐my, ┐e w definicji selektora potomka poszczeg≤lne elementy s▒ rozdzielone spacjami. Spacja jest tzw. kombinatorem - w CSS2 rozr≤┐niamy trzy rodzaje kombinator≤w: spacja, znak + i znak >. Spacje wok≤│ znak≤w + i > s▒ opcjonalne.

d. Selektor dziecka (child selector)

Element jest dzieckiem w stosunku do innego elementu, je╢li jest w nim zawarty i jest o jeden szczebel ni┐ej w hierarchii. Na przyk│ad, w <h1> <h3> </h3> </h1>, H3 jest dzieckiem H1, ale wszystko w ramach H3 jest ju┐ dzieckiem wobec H3, a nie H1 (chocia┐ jest zarazem potomkiem H1). Je╢li chcemy , aby wszystkie H3, kt≤re s▒ dzieµmi H1, by│y czerwone, u┐yjemy polecenia:

H1 > H3 { color : red }

Inny przyk│ad:

p > u { color : white }

to jest bia│e podkre╢lenie w ramach akapitu

Podkre╢lenie poza znacznikami akapitu nie jest ju┐ bia│e.

Interpretacja: Netscape 6, Opera 5.

Ilustracja dla u┐ytkownik≤w IE:

e. Selektor braci (adjacent sibling selector)

Selektor pozwala nadawaµ okre╢lone formatowanie jednemu z bezpo╢rednio s▒siaduj▒cych ze sob▒ element≤w, maj▒cych tego samego rodzica. Je╢li np. mamy fragment pogrubiony i fragment pochylony w ramach akapitu, za╢ kod stylu ma postaµ:

B + I {color:green}

fragment pochylony uzyska odpowiednie formatowanie. Zauwa┐my, ┐e stosujemy tutaj kombinator w postaci znaku +.

Akapit, w tym pogrubienie oraz s▒siaduj▒ce pochylenie i reszta akapitu

Inny przyk│ad:

H1 + H2 { margin-left: +15mm }

Tytu│ stopnia pierwszego

Nieco przesuniΩty tytu│ stopnia drugiego

Polecenie realizuj▒ Netscape 6 i Opera 5.

Ilustracja dla u┐ytkownik≤w IE: