CSS Izbirniki kažejo na HTML element, ki ga želimo preoblikovati, blok formata pa vsebuje stavke, ločene s podpičji. Vsaka deklaracija vključuje CSS lastnosti in vrednosti, ločene s podpičjem. Medtem ko se izjava konča s podpičjem, se bloki končajo z zavitimi oklepaji. Izbirniki služijo za "iskanje" HTML elementov, ki jih želimo transformirati, razdelimo pa jih v pet kategorij.
Zgoraj vam prikazujem primer spletne strani, ki združuje različne vrste CSS izbirnikov v praktični uporabi. Primer prikazuje preprosto spletno stran podjetja, kjer lahko vidite delovanje preprostih izbirnikov (elementi, razredi, ID-ji), kombinatorjev (potomec, otrok, sosedski, splošni sorojenci), psevdo-razredov in psevdo-elementov. Stran vsebuje naslov, navigacijo in vsebinske sekcije, kjer lahko opazujete, kako različni izbirniki vplivajo na oblikovanje elementov. Posebej zanimivi so učinki lebdenja nad povezavami, oblikovanje prve črke odstavkov in posebno označevanje pomembnega besedila.
| Izbirnik | Primer | Opis |
|---|---|---|
| Preprosti izbirniki | ||
* | * { } |
Univerzalni izbirnik – izbere vse elemente |
element | p { } |
Izbere vse elemente z navedenim imenom |
.razred | .naslov { } |
Izbere vse elemente z določenim razredom |
#id | #glava { } |
Izbere element z določenim ID-jem |
element.razred | p.opis { } |
Izbere element z določenim razredom |
element, element | h1, p { } |
Skupinski izbirnik – izbere več elementov |
| Izbirniki atributov | ||
[atribut] | [href] { } |
Izbere elemente z določenim atributom |
[atribut="vrednost"] | [type="text"] { } |
Izbere elemente z natančno vrednostjo atributa |
[atribut~="vrednost"] | [class~="aktiven"] { } |
Izbere elemente, katerih atribut vsebuje celo besedo |
[atribut|="vrednost"] | [lang|="sl"] { } |
Izbere elemente z vrednostjo, ki se začne s podano besedo |
[atribut^="vrednost"] | [href^="https"] { } |
Izbere elemente, katerih atribut se začne z vrednostjo |
[atribut$="vrednost"] | [href$=".pdf"] { } |
Izbere elemente, katerih atribut se konča z vrednostjo |
[atribut*="vrednost"] | [href*="vadnica"] { } |
Izbere elemente, katerih atribut vsebuje vrednost |
| Kombinatorji | ||
element element | div p { } |
Potomec – izbere vse p znotraj div |
element > element | div > p { } |
Neposreden otrok – izbere samo neposredne potomce |
element + element | div + p { } |
Naslednji sosed – izbere element takoj za drugim |
element ~ element | div ~ p { } |
Splošni sosed – izbere vse sosednje elemente za drugim |
| Psevdo-razredi | ||
:active | a:active { } |
Izbere aktivno povezavo |
:checked | input:checked { } |
Izbere označene input elemente |
:disabled | input:disabled { } |
Izbere onemogočene elemente |
:empty | div:empty { } |
Izbere elemente brez vsebine |
:enabled | input:enabled { } |
Izbere omogočene elemente |
:first-child | p:first-child { } |
Izbere prvi otrok starša |
:first-of-type | p:first-of-type { } |
Izbere prvi element določene vrste |
:focus | input:focus { } |
Izbere element v fokusu |
:hover | a:hover { } |
Izbere element ob prehodu miške |
:in-range | input:in-range { } |
Izbere elemente z vrednostjo v obsegu |
:invalid | input:invalid { } |
Izbere elemente z neveljavno vrednostjo |
:lang() | p:lang(sl) { } |
Izbere elemente z določenim jezikom |
:last-child | p:last-child { } |
Izbere zadnji otrok starša |
:last-of-type | p:last-of-type { } |
Izbere zadnji element določene vrste |
:link | a:link { } |
Izbere neobiskane povezave |
:not() | :not(p) { } |
Izbere vse razen navedenega elementa |
:nth-child() | p:nth-child(2) { } |
Izbere n-ti otrok starša |
:nth-last-child() | p:nth-last-child(2) { } |
Izbere n-ti otrok od konca |
:nth-last-of-type() | p:nth-last-of-type(2) { } |
Izbere n-ti element vrste od konca |
:nth-of-type() | p:nth-of-type(2) { } |
Izbere n-ti element določene vrste |
:only-child | p:only-child { } |
Izbere edini otrok starša |
:only-of-type | p:only-of-type { } |
Izbere edini element določene vrste |
:optional | input:optional { } |
Izbere neobvezne elemente obrazca |
:out-of-range | input:out-of-range { } |
Izbere elemente z vrednostjo izven obsega |
:read-only | input:read-only { } |
Izbere elemente samo za branje |
:read-write | input:read-write { } |
Izbere elemente za branje in pisanje |
:required | input:required { } |
Izbere obvezne elemente obrazca |
:root | :root { } |
Izbere korenski element dokumenta |
:target | :target { } |
Izbere trenutni aktivni cilj URL |
:valid | input:valid { } |
Izbere elemente z veljavno vrednostjo |
:visited | a:visited { } |
Izbere obiskane povezave |
| Psevdo-elementi | ||
::after | p::after { } |
Vstavi vsebino za elementom |
::before | p::before { } |
Vstavi vsebino pred elementom |
::first-letter | p::first-letter { } |
Izbere prvo črko besedila |
::first-line | p::first-line { } |
Izbere prvo vrstico besedila |
::selection | ::selection { } |
Izbere označeno besedilo uporabnika |
