CSS selektoreid kasutatakse soovitud elementide leidmiseks (selekteerimiseks) veebilehel.

Selektoreid saab jaotada viite erinevasse kategooriasse:

• Lihtsad selektorid (rakendub elementidele olenevalt elemendi nimest, id‘st või class’ist)
• Kombineeritud selektorid (selekteeri elemente vastavalt nendevahelisele suhtele)
• Pseudoklass selektorid (selekteeri elemente vastavalt nende olekule)
• Pseudoelement selektorid (selekteeri ja stiliseeri üks osa elemendist)
• Atribuudi selektorid (selekteeri ja stiliseeri elemente vastavalt nende atribuutidele või atribuutide väärtustele)

Kõikidele elementidele korraga viitamine

Vahel harva võib vaja minna ka võimalust luua kujundus korraga kõigile HTML elementidele, sellisel juhul on selektoriks „*“ (tärn).

Näiteks:

* {
  color: black;
}

Antud juhul muudetakse kõikide HTML elementide värv mustaks. Tavaliselt viidatakse kõigile mingi elemendi sees olevatele tütarelementidele.

Elemendi selekteerimine

Kindlale elemendile kujunduse loomiseks kasutame soovitud elemendi nime. Näiteks järgneva koodiga saame muuta kõiki <h1> suuruses pealkirjad punaseks:

h1 {
  color: red;
}

Id selekteerimine

Kujunduse saab luua ka kindlat identifikaatorit omavale objektile (mille algusmärgendis on id atribuut). Kindla id-ga elemendi selekteerimiseks kirjutame sümboli #, millele järgneb id väärtus: #atribuudi_id_väärtus {kujundus}.

Näiteks:

#suur {
  font-size: 20px;
}

NB! Elemendi id atribuudi järgi määratud kujundus on kõrgema prioriteediga kui näiteks klass!
NB! Kujunduse määramisel tuleks eelistada klasside kasutamist!
NB! Ühegi HTML elemendi id atribuudi väärtust ei tohi alustada numbriga!

Sarnaselt võib luua kindlat tüüpi ja kindlat identifikaatorit omavale objektile. Näiteks kujundus tekstilõigule (HTML element <p>), millel nimeks “oluline”:

p#oluline {
 text-align: center;
 color: red;
}

Klassi selekteerimine

Sarnaselt id atribuudile kujunduse loomisega saame kujundusi luua ka klassi atribuute omavatele elementidele. Sellisel juhul kasutame punkti, millele järgneb klassi väärtus: .atribuudi_klass_väärtus {kujundus}.

Näiteks muudame kõik elemendid, millel on klassiatribuut väärtusega kollane, kollaseks.

.kollane { 
  color: yellow; 
}

Samuti võime me selekteerida ainult kindlaid elemente mis omavad kindlat id või klassi väärtust.

Näiteks soovime selekteerida ainult teise taseme pealkirju, milledele on määratud klass “keskel” (<h2 class="keskel">Pealkiri</h2>).

h2.keskel{
  color: red;
}

Mitu selektorit korraga

Ühesugust kujundust saab määrata korraga mitmele erinevale veebilehe elemendile! Selleks tuleb soovitud HTML elemendid üheks selektoriks grupeerida ehk nad lihtsalt komadega eraldatult üles loetleda.

Näiteks:

p, h1, h2, h3, h4, h5 {
  text-align:center;
  font-family: arial;
  color:red
}