CSS selektorji omogočajo izbiro elementov v dokumentu HTML. Z njimi določimo, na katere dele dokumenta se bo uporabilo posamezno slogovno pravilo. Osnova preprostega selektorja je lahko ime elementa, poleg tega pa poznamo tudi univerzalni selektor in različne dodatne pogoje, s katerimi izbor elementov natančneje omejimo.
Pomni: Selektor določa, kateri elementi bodo izbrani, deklaracije pa določajo, kako bodo ti elementi oblikovani.
Osnovna pravila
Osnova vsakega preprostega selektorja je lahko ime elementa HTML. Tak selektor izbere vse pojavitve tega elementa v dokumentu. Namesto imena elementa lahko uporabimo tudi zvezdico *, ki pomeni katerikoli element. Temu pravimo univerzalni selektor.
| selektor | pomen |
|---|---|
A |
vse pojavitve elementa A |
* |
vse pojavitve vseh elementov |
Če zapišemo univerzalni selektor, bodo oblikovne lastnosti veljale za vse elemente v dokumentu.
* { color: red; }
Preprostemu selektorju lahko dodamo še dodatne pogoje. Tako ne izberemo vseh pojavitev elementa, ampak samo tiste, ki ustrezajo natančnejšim zahtevam.
Primerjave
Z dodatnimi pogoji na osnovnem selektorju dosežemo, da oblikovne lastnosti ne veljajo za vse pojavitve elementa, ampak samo za tiste, ki ustrezajo danim pogojem. Te pogoje zapišemo takoj za osnovnim selektorjem, brez dodatnih ločil.
Osnovni selektorji in dodatni pogoji
| vrsta | pomen |
|---|---|
| osnovni selektor | izbere elemente po imenu oznake ali z univerzalnim selektorjem * |
| dodatni pogoji | izbor omejijo na elemente z razredom, identifikatorjem, atributom, stanjem ali določenim delom vsebine |
Pozor: Več kot je pogojev v selektorju, bolj natančno določimo izbrane elemente. Zato moramo pri pisanju selektorjev paziti, da ne postanejo po nepotrebnem zapleteni.
Zgledi
Najpogostejši dodatni pogoji
Najpogostejši dodatni pogoji so razredni selektorji, identifikatorski selektorji, atributni selektorji, psevdo-razredi in psevdo-elementi. Razredni selektorji uporabljajo zapis s piko, identifikatorski selektorji zapis z lojtro, atributni selektorji pa oglate oklepaje. Psevdo-razredi se začenjajo z enim dvopičjem, psevdo-elementi pa z dvema.
| selektor | pomen |
|---|---|
.razred |
element pripada razredu razred |
#id |
element ima identifikator id |
[lastnost] |
element ima določeno lastnost lastnost |
[L="V"] |
vrednost lastnosti L je enaka V |
[L~="V"] |
ena od presledčno ločenih vrednosti lastnosti L je enaka V |
[L|="V"] |
vrednost lastnosti L je enaka V ali pa se začne z V- |
:link |
element je še neobiskana povezava |
:visited |
element je že obiskana povezava |
:hover |
kazalec miške je nad elementom |
:active |
element je v aktivnem stanju |
:focus |
element ima fokus |
:first-child |
element je prvi med sorojenci |
:lang(jezik) |
izbere elemente določenega jezika |
::first-letter |
označuje prvo črko prve vrstice elementa |
::first-line |
označuje prvo vrstico elementa |
::before |
ustvari psevdo-element pred vsebino elementa |
::after |
ustvari psevdo-element za vsebino elementa |
Primer univerzalnega selektorja
* {
color: red;
}To pravilo določi rdečo barvo besedila vsem elementom, ki jih zajame dokument.
Primer selektorja elementa
p {
color: gray;
}To pravilo velja za vse elemente <p> v dokumentu.
Priporočila
- Uporabi selektor elementa, kadar želiš oblikovati vse pojavitve iste oznake.
- Univerzalni selektor uporabljaj premišljeno, ker vpliva na vse elemente.
- Dodatne pogoje uporabljaj takrat, ko želiš bolj natančno izbrati elemente.
- Selektorje zapisuj pregledno in le tako zapleteno, kot je potrebno.
Pogoste napake
- Preširoka uporaba univerzalnega selektorja
*. - Napačno razumevanje razlik med razrednimi, identifikatorskimi in atributnimi selektorji.
- Mešanje psevdo-razredov in psevdo-elementov.
- Uporaba preveč zapletenih selektorjev tam, kjer bi zadostoval preprostejši zapis.
Dober selektor je dovolj natančen, da izbere prave elemente, hkrati pa dovolj preprost, da ostane koda pregledna in lažje vzdrževana.