CSS - kaskadowe arkusze stylu - selektory

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

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.

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:

dzieci CSS

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.

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 }

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

zestawienie selektorów

SelektorPrzykładOpis 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)

Projekt i wykonanie: Ryszard Rogacz© 1999−2025