CSS selektorji nam omogočijo izbiro in oblikovanje HTML elementa. Osnova vsakega selektorja je ime nekega elementa. Oblikovne lastnosti bodo veljale za vse pojavitve elementa s tem imenom.
| element | pomen |
|---|---|
| A | vse pojavitve elementa A |
| * | vse pojavitve vseh elementov |
Za ime elementa lahko napišemo tudi zvezdico *, ki določa katerikoli element. V tem primeru bodo oblikovne lastnosti veljale za vse pojavitve vseh elementov. Zvezdici zato rečemo tudi univerzalni selektor. Če bi vsem elementom želeli nastaviti rdečo barvo, bi napisali:
* { color: red }
Omejitve
Z omejitvami na osnovnem selektorju (ime oznake ali zvezdica) dosežemo, da oblikovne lastnosti ne bodo veljale za vse pojavitve elementa, pač pa samo za tiste pojavitve, ki zadoščajo vsem omejitvam. Omejitve naštejemo takoj za imenom elementa v poljubnem vrstnem redu. Vmes ne pišemo nobenih ločil (niti presledka). Kadar naštevamo omejitve univerzalnega selektorja, zvezdice ni potrebno pisati, dovolj je našteti samo omejitve.
Omejitve so različnih vrst. Omejitvi .razred in #oznaka določata, kakšno vrednost mora imeti neka lastnost elementa. Vrednost lastnosti elementa določajo tudi omejitve, ki jih pišemo v oglatih oklepajih.
Omejitve, ki se pričnejo z dvopičjem, pa določajo, v kakšnem stanju mora biti element.
| omejitev | pomen |
|---|---|
.razred |
element pripada razredu razred |
#oznaka |
element ima oznako oznaka |
[lastnost] |
element ima definirano lastnost lastnost |
[L="V"] |
vrednost lastnosti L je enaka V |
[L~="V"] |
ena izmed vrednosti lastnosti L je enaka V |
[L|="V"] |
vrednost lastnosti L je enaka V ali pa se prične z V- |
:link |
element je še neobiskana povezava |
:visited |
element je že obiskana povezava |
:hover |
nad elementom je miškin kurzor |
:active |
element je aktiven (uporabnik je pritisnil tipko na miški in je še ni spustil) |
:focus |
element ima fokus |
:first-child |
element je prvi neposredni potomec nekega drugega elementa |
:lang(language) |
označuje jezik elementa |
::first-letter |
označuje prvi znak elementa |
::first-line |
označuje prvo vrstico elementa |
::before |
vstavi vsebino pred element |
::after |
vstavi vsebino za element |