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.
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 } |
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.
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:
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.
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 } |
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".