CSS Izbirniki (ang. CSS Selectors)

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.

Hiter pregled CSS izbirnikov

div

span

div { } /* Element */
.highlight { } /* Razred */
#special { } /* ID */

Otrok

Sosed

div > span { } /* Neposreden otrok */
span + p { } /* Naslednji sorodniki */

Zadrži kazalec

a:hover { } /* Ob prehodu z miško */
input:focus { } /* Ob fokusu */

Na zgornji sliki je prikazana osnovna struktura CSS izbirnika. Sestavljena je iz izbirnika (ang. Selector), ki mu sledi blok deklaracij znotraj zavitih oklepajev. Vsaka deklaracija je sestavljena iz lastnosti (ang. Property) in vrednosti (ang. Value), ki sta ločeni z dvopičjem. Več deklaracij ločimo s podpičjem, kar omogoča jasen in pregleden zapis različnih stilskih pravil za izbrane elemente.

PRIMER

<!DOCTYPE html>
<html lang="sl">
<head>
    <style>
        /* preprost izbirnik elementa */
        p {
            font-family: Arial, sans-serif;
        }

        /* izbirnik razreda */
        .pomembno {
            color: #d63384;
            font-weight: bold;
        }

        /* izbirnik ID-ja */
        #glavni-naslov {
            color: #0d6efd;
            text-align: center;
            margin-bottom: 25px;
        }

        /* kombinator potomcev */
        div p {
            margin-left: 20px;
        }

        /* kombinator otroka */
        div > span {
            background-color: #ffc107;
            padding: 2px 5px;
        }

        /* sosedski kombinator */
        h2 + p {
            font-style: italic;
        }

        /* splošni sorojenci kombinator */
        h2 ~ p {
            line-height: 1.6;
        }

        /* psevdo-razredi */
        a:hover {
            color: #198754;
            text-decoration: none;
        }

        /* psevdo-elementi */
        p::first-letter {
            font-size: 120%;
            font-weight: bold;
        }

        /* atributni izbirnik */
        [title] {
            cursor: help;
        }

        .vsebovalnik {
            max-width: 800px;
            margin: 20px auto;
            padding: 20px;
            border: 1px solid #dee2e6;
            border-radius: 8px;
        }
    </style>
</head>
<body>
    <div class="vsebovalnik">
        <h1 id="glavni-naslov">Dobrodošli na moji spletni strani</h1>
        
        <h2>O meni</h2>
        <p>Ta odstavek bo v <span>poševnem tisku</span>, ker sledi elementu h2.</p>
        <p>Sem <span class="pomembno">kreativni razvijalec</span>, ki stremi k odličnosti.</p>
        
        <div class="sekcija">
            <h2>Moje storitve</h2>
            <p>Ponujam različne storitve:</p>
            <ul>
                <li>Spletno oblikovanje</li>
                <li>Razvoj aplikacij</li>
                <li>SEO optimizacija</li>
            </ul>
        </div>
        
        <p title="Kliknite za več informacij">Več informacij o meni najdete <a href="aboutMe.php">tukaj</a>.</p>
    </div>
</body>
</html>

REZULTAT

PREPROSTI IZBIRNIKI | IZBIRNIKI KOMBINATORJEV | IZBIRNIKI PSEVDORAZREDOV | IZBIRNIKI PSEVDOELEMENTOV | IZBIRNIKI ATRIBUTOV

Izbirnik	Opis	Primeri
PREPROSTI IZBIRNIKI
*	Univerzalni izbirni (*) izbere vse HTML elemente na spletni strani.	Glej primer
#id	Uporablja atribut ID HTML elementa za izbiro določenega elementa.	Glej primer
.class	Izbere elemente z določenim atributom razreda.	Glej primer
element	Izbere vse elemente z navedenim imenom razreda.	Glej primer
element.class	Se uporablja za izbiro podanega elementa s podanim razredom.	Glej primer
element, element, ...	Če želimo oblikovati več elementov z istim slogom.	Glej primer
IZBIRNIKI KOMBINATORJEV
element, element	Se uporablja za izbiro elementov znotraj elementov.	Glej primer
element > element	Se uporablja za izbiro elementov z določenim nadrejenim elementom.	Glej primer
element + element	Se uporablja za izbiro elementa, ki je neposredno za drugim določenim elementom.	Glej primer
element ~ element	Se ujema s pojavitvami elementa2, pred katerim je element1.	Glej primer
IZBIRNIKI PSEVDORAZREDOV
:active	Se uporablja za izbiro in oblikovanje aktivne povezave.	Glej primer
anchor	Povezave na spletnih straneh so lahko zelo različne.	Glej primer
:checked	Se ujema z vsakim označenim elementom <input>.	Glej primer
:disabled	Se ujema z vsakim onemogočenim elementom.	Glej primer
:empty	Se ujema z vsakim nepodrejenim elementom, vključno z besedilnimi vozlišči.	Glej primer
:enabled	Se ujema z vsakim elementom, ki je omogočen.	Glej primer
:first-child	Se uporablja za izbiro podanega izbirnika.	Glej primer
:first-of-type	Se ujema z vsakim elementom, ki je prvi podrejeni element.	Glej primer
:focus	Se uporablja za izbiro elementa, ki ima fokus.	Glej primer
:hover	Se uporablja za spremembo elementa.	Glej primer
:in-range	Izbere vse elemente z vrednostjo.	Glej primer
:invalid	Predstavlja kateri koli obrazec.	Glej primer
:lang	Se uporablja za izbiro elementov.	Glej primer
:last-of-type	Se ujema z vsemi elementi.	Glej primer
:link	Se uporablja za izbiro neobiskanih povezav.	Glej primer
:not	Se ujame z vsemi elementi, ki niso podani elementu/izbirniku.	Glej primer
:nth-child	Se ujema z vsemi elementi, ki so n-ti otroci svojega starša.	Glej primer
:nth-last-child	Se ujame z vsemi elementi, ki je n-ti otrok.	Glej primer
:nth-last-of-type	Se ujema z vsakim elementom, ki je n-ti podrejeni element.	Glej primer
:nth-of-type	Se ujema z vsakim elementom, ki je n-ti podrejeni element.	Glej primer
:only-child	Se ujame z vsemi elementi, ki so edini otrok svojega starša.	Glej primer
:only-of-type	Se ujema z vsakim elementom, ki je edini podrejeni element svojega starša.	Glej primer
:optional	Izbere neobvezne elemente obrazca.	Glej primer
:out-of-range	Izbere vse elemente z vrednostjo, ki je zunaj določenega obsega.	Glej primer
:read-only	Izbere elemente, ki so samo za branje.	Glej primer
:read-write	Izbere elemente obrazca, ki so berljivi.	Glej primer
:required	Izbere zahtevane elemente obrazca.	Glej primer
:root	Se ujema s korenskim elementom dokumenta.	Glej primer
:target	Lahko uporabimo za oblikovanje trenutnega aktivnega ciljnega elementa.	Glej primer
:valid	Izbere elemente obrazca z vrednostjo.	Glej primer
:visited	Se uporablja za izbiro obiskanih povezav.	Glej primer
IZBIRNIKI PSEVDOELEMENTOV
::after	Vstavi nekaj za vsebino vsakega izbranega elementa.	Glej primer
::before	Vstavi nekaj pred vsebino vsakega izbranega elementa.	Glej primer
::first-letter	Se uporablja za dodajanje sloga prvi črki podanega izbirnika.	Glej primer
::first-line	Se uporablja za dodajanje sloga prvi vrstici podanega izbirnika.	Glej primer
::marker	Izbere oznako elementa seznama.	Glej primer
::selection	Se ujema z delom elementa, ki ga izbere uporabnik.	Glej primer
IZBIRNIKI ATRIBUTOV
[atribut]	Se uporablja za izbiro elementov z navedenim atributom.	Glej primer
[atribut="vrednost"]	Se uporablja za izbiro elementov z navedenim atributom in vrednostjo.	Glej primer
[atribut~="vrednost"]	Se uporablja za izbiro elementov z vrednostjo atributa, ki vsebuje določeno besedo.	Glej primer
[atribut\|="vrednost"]	Se uporablja za izbiro elementov z navedenim atributom, ki se začnejo s podano vrednostjo.	Glej primer
[atribut^="vrednost"]	Se ujema z vsakim elementom, katerega vrednost atributa se začne z določeno vrednostjo.	Glej primer
[atribut$="vrednost"]	Se ujema z vsakim elementom, katerega vrednost atributa se konča z določeno vrednostjo.	Glej primer
[atribut*="vrednost"]	Se ujema z vsakim elementom, katerega vrednost atributa vsebuje določeno vrednost.	Glej primer