Selektory

4.1. Grupowanie.

Jeżeli kilka selektorów posiada te same deklaracje, to można je zgrupowanać w jedną deklarację, a poszczególne elementy będą oddzielić przecinkami. Na przykład:

H1 { font-family: sans-serif } H2 { font-family: sans-serif } H3 { font-family: sans-serif }

można zapisać również jako:

H1, H2, H3 { font-family: sans-serif }

4.2. Selektory potomne.

Czasami autorzy chcą wyróżnić elementy, które zawierają się wewnątrz innych elementów w dokumencie (np. element EM, który znajduje się w elemencie H1). Następujące deklaracje:

H1 { color: red } EM { color: red }

mimo, że ich celem jest zmiana koloru tekstu, który znajduje się wewnątrz tych elementów (H1, EM), to nie będzie widać żadnego efektu w przypadku:

<H1>This headline is <EM>very</EM> important</H1>

Można to zmienić poprzez zmianę koloru na niebieski (blue), kiedy znacznik EM znajdzie się wewnątrz znacznika H1, co pokazuje poniższy przykład:

H1 { color: red } EM { color: red } H1 EM { color: blue }

Inny przypadek to:

<H1>This <SPAN class="myclass">headline is <EM>very</EM> important</SPAN></H1>

I tutaj powinien znaleźć się selektor:

H1 * EM

gdyż selektor w postaci H1 EM nie da żadnego rezultatu, ponieważ element EM znajduje się wewnątrz jeszcze innego elementu jakim jest znacznik SPAN.

4.3. Selektory 'dzieci'

Selektor 'dziecko' występuje wtedy, gdy znacznik 'dziecko' znajduje się wewnątz innego znacznika. Selektor 'dziecko' składa się z dwóch lub więcej selektorów oddzielonych znakiem ">".
Poniższa instrukcja ustawia wygląd wszystkich znaczników P, które są 'dziećmi' w stosunku do znacznika BODY:

BODY > P { line-height: 1.3 }

Poniższy przykład przedstawia kombinację selektorów potomnych i selektorów 'dzieci':

DIV OL>LI P

Opis: w tym przypoadku znacznik P jest elementem potomnym w stosunku do LI; znacznik LI musi być 'dzieckiem' znacznika OL; znacznik OL musi być elementem potomnym w stosunku do DIV.

4.4. Atrybuty selektorów.

CSS2 pozwala autorom zawężać opisy wyglądu poszczególnych elementów. Na przykład można opisać wygląd elementów o konkretnych atrybutach zdefiniowanych w dokumencie.
Atrybuty selektorów mogą wyglądać następująco:

[att]	kiedy element ma atrybut 'att' i jakąkolwiek jego wartość.
[att=val]	kiedy wartość atrybutu 'att' jest równa 'val'.
[att~=val]	kiedy wartość atrybutu 'att' jest słowem lub zbiorem słów oddzielonych 'spacją', a jedno z tych słów jest równe wartości 'val'. Wartość 'val' nie może zawierać 'spacji'.
[att|=val]	kiedy wartość atrybutu 'att' rozpoczyna się wyrazem określonym przez wartość 'val'.

Dla przykładu, poniższa instrukcja dotyczy wszystkich znaczników H1, które mają określony atrybut title:

H1[title] { color: blue; }

Poniższy przykład dotyczy przypadku, kiedy znacznik SPAN musi posiadać wartość example atrybutu class:

SPAN[class=example] { color: blue; }

Inny przykład pokazuje występowanie dwóch atrybutów w znaczniku SPAN:

SPAN[hello="Cleveland"][goodbye="Columbus"] { color: blue; }

Poniższy przykład pokazuje jak ukryć wszystkie elementy, których wartość atrybutu LANG jest równa 'fr' (tzn. kiedy język jest francuski):

*[LANG=fr] { display : none }

Poniższy przykład pokazuje wykorzystanie "|=" i dotyczy znaczników, których wartość atrybutu LANG rozpoczynają się od 'en' (np.: 'en', 'en-US', 'en-cockney'):

*[LANG|="en"] { color : red }

4.5. Inne

W opisie wyglądu użytym w HTML autorzy mogą używać kropki (.) jako alternatywnego rozwiązania w stosunku do "~=" w przypadku atrybutu o nazwie class. Czyli, DIV.wartosc jest równoważny zapisowi DIV[class~=wartosc]. Na przykład, można przypisać informację o wyglądzie do wszystkich elementów, których atrybut class~="wartosc":

*.wartosc { color: green }

lub inaczej:

.wartosc { color: green }

Poniższy przykład dotyczy tylko znacznika H1, którego atrybut class~="wartosc":

H1.wartosc { color: green }

Wykonanie tej instrukcji w pierwszej linii poniższego dokumentu HTML nie spowoduje ustawienia koloru tekstu na zielony, zaś w drugiej linii tak. Spójrz:

<H1>Ten tekst nie jest w kolorze zielonym.</H1> <H1 class="wartosc">Ten tekst jest w kolorze zielonym.</H1>

W przypadku większej ilości wartości atrybutu class, każda wartość musi być oddzielona kropką ".".

Poniższy przykład pokazuje instrukcję, w której znacznik P powinien mieć za wartości atrybutu class wyrazy: wart1 i wart2 oddzielone klawiszem spacji:

P.wart1.wart2 { color: green}

Instrukcja ta zadziała w przypadku, gdy class="wart1 jest jakas tam i wart2 tez", ale nie zadziała jeżeli class="wart1 jest jakas tam".

4.6. Pseudoklasy

:first-child - występuje wtedy, gdy znacznik jest pierwszym 'dzieckiem' innego znacznika. Na przykład:

DIV > P:first-child { text-indent: 0 }

Powyższym przypadek dotyczy sytuacji gdy znacznik P będzie pierwszym 'dzieckiem' znacznika DIV. Poniższy przykład HTML obrazuje to chyba najlepiej:

<P> Ostatni element P przed 'opis'. <DIV class="opis"> <P> Pierwszy element P wewnątrz 'opis'. </DIV>

Zaś przypadku poniższego ona nie dotyczy:

<P> Ostatni element P przed 'opis'. <DIV class="opis"> <H2>Note</H2> <P> Pierwszy element P wewnątrz 'opis'. </DIV>

:link - dotyczy odsyłaczy, które nie zostały jak do tej pory wybrane (odwiedzone)

Przykład:

A:link { color: green }

jest równoważny

:link { color: green}

Istnieje możliwość zmiany wyglądu wybranych odsyłaczy, np.:

A.inny:link { color: red }

oraz w dokumencie HTML:

<A href="http://www.domena.com/" class="inny">Odsyłacz do innej strony</A>

:visited - dotyczy odsyłaczy, które zostały już wcześniej wybrane (odwiedzone)

Przykład:

A:visited { color: yellow }

:hover - dotyczy odsyłaczy, nad którymi znajduje się kursor (wskaźnik myszy)

Przykład:

A:hover { color: blue }

:active - dotyczy odsyłacza, który został wybrany przez użytkownika; jest to okres czasu od momentu wybrania odsyłacza (najechania wskaźnikiem myszy nad odsyłacz i kliknięcie lewym przyciskiem myszy) do momentu przejścia do określonej przez odsyłacz strony

Przykład:

A:active { color: purple }

:focus - dotyczy odsyłacza, który jest teraz podświetlony (aktywny); dotyczy klawiatury

Przykład:

A:focus { color: white }

Istnieje możliwość łączenia selektorów dotyczących odsyłaczy, np.:

A:focus:hover { color: lime }

Powyższy zapis określa kolor czcionki odsyłacza w przypadku podświetlenia odsyłacza przy użyciu klawiatury lub poprzez umieszczenie wskaźnika myszy nad odsyłaczem.

:first-line - określa styl pierwszej sformatowanej linii danego bloku

Przykład:

P:first-line { font-weight: bold }

Powyższy zapis oznacza, że należy zmienić grubość czcionki w przypadku każdej pierwszej linii paragrafu.

Należy pamiętać, że pseudoelement :first-line odnosi się tylko do elementów blokowych i może on posiadać właściwości odnoszące się do czcionki, koloru i tła, a także właściwości: 'word-spacing', 'letter-spacing', 'text-decoration', 'vertical-align', 'text-transform', 'line-height', 'text-shadow', 'clear'.

:first-letter - określa styl pierwszej litery (znaku) w bloku, elemencie

Przykład:

P:first-letter { font-size: 4em; text-transform: uppercase }

:before - określa zawartość umieszczoną przed danym blokiem lub elementem

Przykład:

P:before { content: counter(numer, upper-roman) ". " }

Powyższy przykład numeruje kolejne paragrafy wstawiając przed zawartością każdego z nich wartość w postaci kolejnej liczby rzymskiej oraz łańcucha ". ".

:after - określa zawartość umieszczoną po danym bloku lub elemencie

Przykład:

P:after { content: "." }

Powyższy przykład stawia kropkę na końcu każdego paragrafu.

Autor:
Krzysztof Stelmach
stelmi@priv2.onet.pl

 

Kurs udostępnił :
http://stelmik.prv.pl