Elementi CSS selektorjev

CSS selektor je lahko:

• oznaka (element) HTML
• oznake: id atribut
• razredi: class atribut

Selektor oznak HTML

Selektor oznak HTML označuje elemente, ki temeljijo na imenih oznak HTML. Vsem odstavkom (vsem pojavitvam elementa p) bi pisavo Arial velikosti 11px srebrne barve in obojestransko poravnane nastavili takole:

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

Oznake: atribut id

Kadar želimo nastaviti oblikovne lastnosti samo za točno določeno pojavitev nekega elementa, izbrano pojavitev elementa posebej poimenujemo, kar storimo tako, da elementu definiramo lastnost id, katere vrednost je enolična oznaka tega elementa. Oznako si lahko poljubno izberemo, paziti pa moramo, da ne bodo različni elementi imeli enakih oznak.

Atribut id lahko v dokumentu HTML uporabimo samo enkrat.

Primer uporabe id atributa v HTML kodi:

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

Določitev oblikovnih lastnosti id oznak v CSS:

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

Kerid v dokumentu lahko uporabimo samo enkrat smemo izpustiti navedbo HTML elementa. Enakovredni zapis zgornjemu je:

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

Razredi: atribut class

Kateremukoli elementu lahko predpišemo lastnost class, katere vrednost je ime razreda, ki mu element pripada. Ime si lahko poljubno izberemo, da bomo kasneje lažje brali napisano kodo, pa je priporočljivo, da se da že iz imena razreda sklepati, kakšni elementi mu pripadajo. Posamezen element lahko pripada tudi več kot enemu razredu. To dosežemo tako, da za vrednost lastnosti class naštejemo več imen razredov, ki jih ločimo s presledki. Presledek ne more nastopati v imenu razreda.

V spodnjem primeru imamo dva primera z nalogami. Prvi primer in naloga sta običajna odstavka p, drugi primer in naloga pa sta zapisana v dveh celicah tabele td. Poleg tega je primer v celici tabele označen kot drugi, kar pomeni, da pripada dvema razredoma.

HTML koda:

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

Oblikovne lastnosti elemntov, ki pripadajo posameznim razredom:

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