Mis on selektor CSS-is?

CSS-i selektor on muster, mis määrab, millistele HTML-elementidele rakenduvad stiilid. See näitab brauserile, milliseid ühte või mitut elementi tuleks valida.

On erinevat tüüpi selektoreid:

• Tüüpselektorid (Type selectors): valivad kõik HTML-i eksemplarid:

  p { /* Valib kõik lõigud */
    color: blue;
  }
  

• Klassi selektorid (Class selectors): valivad elemendid kindla class-i väärtusega:

  .highlight { /* Valib kõik elemendid klassiga "highlight" */
    background-color: yellow;
  }
  

• ID selektorid (ID selectors): valivad ühe elemendi kindla id-ga:

  #header { /* Valib elemendi id-ga "header" */
    font-size: 2em;
  }
  

• Universaalse selektori (Universal selector): valib kõik elemendid:

  * { /* Valib kõik elemendid lehel */
    margin: 0;
    padding: 0;
  }
  

• Atribuudi selektorid (Attribute selectors): valivad elemendid nende atribuutide olemasolu või väärtuse põhjal:

  [type="text"] { /* Valib kõik input-elemendid, mille type="text" */
    border: 1px solid gray;
  }
  

• Pseudoklassid (Pseudo-classes): valivad elemendid nende oleku põhjal:

  a:hover { /* Valib lingid, kui hiir on nende kohal */
    text-decoration: underline;
  }
  

• Pseudoelemendid (Pseudo-elements): valivad kindlaid osi või loovad "fiktiivseid" elemente:

  p::first-line { /* Valib esimese rea */
    font-weight: bold;
  }
  

• Kombinaatorid (Combinators): määravad suhted selektorite vahel:

  Kombinaator	Kirjeldus	Näide
  Tühik ( )	Järeltulija selektor (Descendant selector)	div p
  >	Lapse selektor (Child selector)	div > p
  +	Naabri selektor (Adjacent sibling selector)	h1 + p
  ~	Üldine naabri selektor (General sibling selector)	h1 ~ p

Selektorid võivad olla kombineeritud, et määrata elemendid täpsemalt.