Elementi CSS selektorjev

Selektor v CSS določa, na katere elemente v dokumentu se bo uporabilo posamezno pravilo. Med osnovne selektorje sodijo selektor elementa, selektor z atributom id in selektor z atributom class. Takšni selektorji so med najpogosteje uporabljenimi pri oblikovanju spletnih strani.

Pomni: Selektor izbere elemente, deklaracije pa določijo njihov videz. Pravilna izbira selektorja je pomembna za pregledno in učinkovito uporabo CSS.

Osnovna pravila

CSS selektor je lahko na primer:

oznaka oziroma element HTML,
atribut id,
atribut class.

Selektor elementa izbere vse elemente iste vrste. Selektor z id cilja en določen element z izbrano vrednostjo atributa id. Selektor z class pa izbere vse elemente, ki pripadajo določenemu razredu. Atribut class lahko vsebuje več imen razredov, ločenih s presledki.

Primerjave

Selektor elementa, `id` in `class`

Vrsta selektorja	Osnovna uporaba
selektor elementa	uporabi se za vse elemente iste oznake, na primer za vse `<p>`
selektor z `id`	uporabi se za en določen element z enolično vrednostjo atributa `id`
selektor z `class`	uporabi se za vse elemente, ki imajo isti razred

Pozor: V istem dokumentu dva elementa ne smeta imeti enake vrednosti atributa id. Atribut class pa se lahko ponovi pri več elementih.

Zgledi

Selektor oznak HTML

Selektor oznak HTML izbira elemente glede na ime oznake HTML. Vsem odstavkom, torej vsem pojavitvam elementa <p>, lahko določimo enake oblikovne lastnosti:

p {
   font-family: Arial;
   font-size: 11px;
   color: silver;
   text-align: justify;
}

Takšno pravilo velja za vse odstavke <p> v dokumentu.

Atribut `id`

Kadar želimo nastaviti oblikovne lastnosti samo za točno določeno pojavitev nekega elementa, temu elementu določimo atribut id. Vrednost atributa id mora biti v dokumentu enolična.

Primer uporabe atributa id v HTML-kodi:

<p id="naslov">
   To je naslov!
</p>

Določitev oblikovnih lastnosti za element z atributom id v CSS:

p#naslov { 
   font-size: 110%;
   font-weight: bold;
   color: #0000FF;
   background-color: transparent;
}

Ker se ista vrednost id v dokumentu uporablja samo enkrat, lahko navedbo oznake HTML tudi izpustimo. Enakovreden zapis zgornjemu je:

#naslov { 
   font-size: 110%;
   font-weight: bold;
   color: #0000FF;
   background-color: transparent;
}

Atribut `class`

Kateremukoli elementu lahko določimo atribut class, katerega vrednost je ime razreda, ki mu element pripada. Posamezen element lahko pripada tudi več razredom. To dosežemo tako, da za vrednost atributa class naštejemo več imen razredov, ki jih ločimo s presledki.

HTML-koda:

<p class="primer">HTML elementom lahko predpišemo atribut class.</p>  
<p class="naloga">Sestavi primer, ki elementu predpiše atribut class:</p>
<table>
   <tr>
      <td class="drugi primer">Vsakemu HTML elementu lahko predpišemo več class vrednosti.</td>
      <td class="naloga">Elementu priredi dve class vrednosti:</td>
   </tr>
</table>

Oblikovne lastnosti elementov, ki pripadajo posameznim razredom:

.drugi { color: red; }
.primer { font-weight: bold; }
.naloga { font-style: italic; }
td.naloga { font-family: Verdana; }

HTML elementom lahko predpišemo atribut class.

Sestavi primer, ki elementu predpiše atribut class:

Vsakemu HTML elementu lahko predpišemo več class vrednosti.

Elementu priredi dve class vrednosti:

Priporočila

Selektor elementa uporabi takrat, ko želiš enak slog dodeliti vsem elementom iste vrste.
Atribut id uporabi za enoličen element, kadar želiš oblikovati točno določen del dokumenta.
Atribut class uporabi za skupine elementov, ki imajo skupne oblikovne lastnosti.
Imena razredov in identifikatorjev izbiraj smiselno in pregledno.

Pogoste napake

Uporaba iste vrednosti atributa id pri več elementih.
Zamenjevanje vloge atributov id in class.
Nejasna ali nepregledna imena razredov.
Pričakovanje, da mora element vedno pripadati samo enemu razredu.

Če za skupinsko oblikovanje uporabiš id namesto class, bo koda manj pregledna in manj prilagodljiva. Za skupine elementov je navadno primernejši atribut class.

Nazaj

Naprej