Načrtovanje in razvoj spletnih aplikacij

CSS selektorji in omejitve

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