CSS: Delovanje +, > in ~ na selektorje

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.

Komentiraj


*