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".
Selektor | Przykład | Opis przykładu |
---|---|---|
* | * | Selektor uniwersalny. Wybiera wszystkie elementy. Może również wybrać wszystkie elementy w innym elemencie. |
element | p | Selektor elementu (typu, znacznika). Wybiera określony element, tu: <p>. |
#id | #firstname | Selektor identyfikatora. Wybiera element z konkretnym identyfikatorem, tu: "firstname" (id="firstname") |
.class | .intro | Selektor klasy. Wybiera elementy konkretnej klasy, tu: "intro" (class="intro") |
element, element | div, p | Selektor grupowania. Wybiera wymienione (oddzielane przecinkiem) elementy, tu: <div> i <p>. | element.class | p.intro | Wybiera określony element z konkretną klasą, tu element <p> z class="intro" |
.class1.class2 | .kla1.kla2 | Wybiera element z określonym zbiorem klas, tu: kla1 i kla2 (element musi być elementem wszystkich wymienionych klas). |
przodek potomek | div p | Selektor potomka. Wybiera wszystkie <p> elementy wewnątrz elementu <div>. 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. |
.classprzo .classpot | .kla1 .kla2 | Wybiera element konkretnej klasy (tu: kla2), który jest potomkiem elementu podanej klasy (tu: kla1). |
rodzic > dziecko | div > p | Selektor dziecka. Wybiera wszystkie <p> elementy, których rodzicem jest element <div>. Pozwala nadać atrybuty elementom, które leżą o jeden rząd niżej w hierarchii drzewa dokumentu. Znacznik będący dzieckiem, musi znajdować się bezpośrednio wewnątrz znacznika rodzica. |
element + element | div + p | Selektor sąsiadującego brata. Wybiera wszystkie elementy (tu: <p>), które są umieszczone natychmiast po innym elemencie (tu: <div>). |
element1 ~ element2 | p ~ ul | Selektor braci. Wybiera każdy element (tu: <ul>) poprzedzony innym elementem (tu: <p>). |
[attribute] | [target] | Selektor atrybutu. Wybiera wszystkie elementy z atrybutem target |
[attribute=value] | [target=_blank] | Wybiera wszystkie elementy z konkretną wartością określonego atrybutu, tu: target="_blank" |
[attribute~=value] | [title~=mak] | Wybiera wszystkie elementy z danym atrybutem (tu: title) o wartości zawierającej słowo "mak" |
[attribute|=value] | [lang|=en] | Wybiera wszystkie elementy z wartością atrybutu lang zaczynającą się od "en" |
[attribute^=value] | a[href^="https"] | Wybiera każdy element (tu <a>), którego wartość atrybutu (tu: href) zaczyna się od "https" |
[attribute$=value] | a[href$=".pdf"] | Wybiera każdy element (tu <a>), którego wartość atrybutu (tu: href) kończy się ciągiem znaków ".pdf" |
[attribute*=value] | a[href*="w3schools"] | Wybiera każdy element (tu <a>), którego wartość atrybutu (tu: href) zawiera podciąg znaków, tu: "w3schools" |
:active | a:active | Wybiera aktywny element, tu: link |
:hover | a:hover | Wybiera element "pod" (wskazany) myszką, tu: link |
::after | p::after | Wybiera określony element (tu p) i określa wstawianie po nim jakiejś zawartość content |
::before | p::before | Wybiera określony element (tu p) i określa wstawianie przed nim jakiejś zawartość content |
:checked | input:checked | Wybiera każdy 'checked' (oznaczony ptaszkiem, fajką) element <input> (np. w radio buttons, checkboxes) |
:default | input:default | Wybiera domyślny element formularza w grupie powiązanych elementów (tu w <input>). Tylko w elementach button, input type = "checkbox", input type = "radio" i option. |
:disabled | input:disabled | Wybiera każdy nieaktywny element <input> (głównie stosowany w formularzach) |
:enabled | input:enabled | Wybiera każdy aktywny element <input> (głównie stosowany w formularzach) |
:empty | p:empty | Wybiera każdy element (tu: <p>), który jest pusty - nie ma elementów potomnych (ani węzłów tekstowych) |
:first-child | p:first-child | Wybiera każdy element (tu: <p>), który jest pierworodny (jest pierwszym dzieckiem rodzica), może być np. pierwszym elementem p w body, w h1, w div, itp. itd. |
::first-letter | p::first-letter | Wybiera pierwszą literę (tu: każdego elementu <p>) |
::first-line | p::first-line | Wybiera pierwszą linię (tu: każdego elementu <p>) |
:first-of-type | p:first-of-type | Wybiera każdy element <p>, który jest pierwszym elementem <p> rodzica |
:focus | input:focus | Wybiera element input, który przyjął zogniskowanie (focus) |
:in-range | input:in-range | Wybiera elementy input o wartościach, które mieszczą się w zakresie (działa tylko dla elementów wejściowych z atrybutami min i / lub max) |
:out-of-range | input:out-of-range | Wybiera wszystkie elementy o wartości, która znajduje się na zewnątrz określonego zakresu. Tylko dla elementów input z atrybutami min i / lub max. |
:indeterminate | input:indeterminate | Wybiera elementy, które znajdują się w stanie nieokreślonym (można używać tylko w elementach input type = "checkbox", input type = "radio" i progress |
:invalid | input:invalid | Wybiera wszystkie elementy ze złą wartością (niezgodną z ustawieniami) |
:lang(language) | p:lang(it) | Wybiera każdy element (tu: <p>) z atrybutem 'lang' o wartości równej "it" |
:last-child | p:last-child | Wybiera każdy element (tu: <p>) który jest ostatnim dzieckiem swojego rodzica. Tożsamy z p:nth-last-child(1) |
:last-of-type | p:last-of-type | Wybiera ostatni element określonego typu (tu: <p>) |
:link | a:link | Wybiera wszystkie nieodwiedzone linki |
:not(selector) | :not(p) | Wybiera wszystkie elementy prócz elementu <p> |
:nth-child(n) | p:nth-child(2) | Wybiera każdy określony element (tu: <p>) który jest kolejnym (tu: drugim) dzieckiem swoich rodziców |
:nth-last-child(n) | p:nth-last-child(2) | Wybiera każdy element <p>, który jest kolejnym (tu: drugim) dzieckiem swoich rodziców od końca/td> |
:nth-last-of-type(n) | p:nth-last-of-type(2) | Wybiera każdy element <p>, który jest drugim od końca elementem <p> swoich rodziców |
:nth-of-type(n) | p:nth-of-type(2) | Wybiera każdy element <p> który jest drugim elementem <p> rodziców |
:only-of-type | p:only-of-type | Wybiera każdy wskazany element (tu: <p>), który jest jedynym dzieckiem tego typu (<p>) swojego rodzica |
:only-child | p:only-child | Wybiera każdy element (tu: <p>), który jest jedynym dzeckiem rodzica |
:optional | input:optional | Wybiera elementy formularza, które są opcjonalne (nie: "required" - wymagane). Używany tylko do elementów formularza: input, select i textarea |
::placeholder | input::placeholder | Wybiera elementy z tekstem zastępczym "placeholder". |
:read-only | input:read-only | Wybiera elementy z atrybutem „tylko do odczytu” ("readonly") |
:read-write | input:read-write | Wybiera elementy, które nie są "readonly" |
:required | input:required | Wybiera tylko elementy fomularza z atrybutem wymagany ("required"). Dotyczy tylko elementów formularza: input, select i textarea. |
:root | :root | Wybiera główny element (korzeń) dokumentu (czyli: html) |
::selection | ::selection | Wybiera zaznaczenie użytkownika (ograniczone w stylizowaniu do: color, background-color, cursor, caret-color, outline, text-decoration, text-emphasis-color, text-shadow) |
:target | #news:target | Wybiera bieżący aktywny element #news (kliknięty adres URL zawierający nazwę tej kotwicy) |
:valid | input:valid | Wybiera wszystkie elementy formularza, które sprawdzają poprawność wypełnienia pola zgodnie z ustawieniami elementu. |
:visited | a:visited | Wybiera wszystkie odwiedzone linki (ograniczony w stylizowaniu do: color, background-color, border-color, outline color, column-rule-color, kolory wypełnienia i obrysu) |
Uwagi: (n) może być liczbą, słowem kluczowym lub formułą. Np. parzyste i nieparzyste to (odd) i (even)