V CSSju lahko uporabljamo enostavne selektorje, kot so h1, div, span, … ali namenske, ki jih ciljamo preko IDja ali classa. V enostavne selektorje pa lahko vključimo tudi kombinatorje, ki nam omogočajo malo drugačno obliko ciljanja.

Kombinator v CSSju pojasnjuje razmerja med selektorji. Poznamo pa različne kombinatorje:

1. ” ” presledek predstavlja naslednji selektor
2. simbol “>” je selektor otrok (child selector)
3. simbol “+” cilja naslednjega sorodnika
4. simbol “~” splošni selektor za vse sorodnike

Kako lahko omenjene kombinatorje uporabimo v CSSju?

1. ” ” presledek
   Najbolj znan tudi najbolj uporabljen način v CSSju. Cilja vse značke znotraj elementa div z imenom “vsebina” na vseh nivojih.
   Primer: div.vsebina p { color: red; }
2. Simbol “>”
   Imenujemo ga selektor otrok. Izbere pa vse elemente, ki so direktni nasledniki določenega elementa.
   Primer: div.vsebina > p { color: green; }
3. Simbol “+”
   Imenujemo ga “Adjacent Sibling Selector”, cilja pa naslednji element, tistega, ki sledi takoj za njim.
   Primer: div + p { color: blue; }
4. Simbol “~”
   Imenujemo ga “General Sibling Selector”, obnaša pa se podobno, kot “Adjacent Sibling Selector” le, da cilja vse elemente.
   Primer: div ~ p::after { content: “~~~”; }

Kombinatorji v akciji

See the Pen
> + ~ by Ziga (@pomagalnik)
on CodePen.