Verige selektorjev v CSS

Selektorje v CSS lahko povezujemo v daljše izraze. Tako izberemo elemente glede na njihov položaj v drevesni strukturi dokumenta, torej glede na odnos med starši, otroki, potomci in sorojenci.

Takšne povezave imenujemo kombinatorji. Najpogosteje uporabljamo kombinator za potomce (presledek), kombinator za neposredne otroke >, kombinator za neposrednega naslednjega sorojenca + in kombinator za vse naslednje sorojence ~.

Osnovna pravila

• Kombinatorji povezujejo selektorje in določajo odnos med elementi v dokumentu.
• Presledek pomeni, da iščemo potomce, ne nujno neposredne otroke.
• Kombinator > izbere samo neposredne otroke.
• Kombinator + izbere samo en element, ki neposredno sledi drugemu elementu.
• Kombinator ~ izbere vse naslednje sorojence istega starša.
• Zapis selektor1, selektor2 ne opisuje sorodstvenega odnosa, ampak združuje več ločenih selektorjev.

V spodnjih primerih bomo uporabili isto strukturo HTML:

<div>
   <p>To je odstavek Paragraph 1 v elementu div.</p>
   <p>To je odstavek Paragraph 2 v elementu div.</p>
   <span><p>To je odstavek Paragraph 3 v elementu div.</p></span>
</div>

<p>To je odstavek Paragraph 4, ki ni v elementu div.</p>
<p>To je odstavek Paragraph 5, ki ni v elementu div.</p>

Skupina selektorjev: div, p

Zapis div, p pomeni, da isto pravilo velja za oba selektorja. Izbrani bodo vsi elementi div in vsi elementi p. Ta zapis ne pomeni razmerja med elementi, ampak združevanje več selektorjev v eno pravilo.

div, p {
    color: orange;
}

Pojasnilo: Obarvajo se vsi elementi div in vsi elementi p. Med njima ni posebnega razmerja; pravilo preprosto velja za obe skupini elementov.

Potomec: div p

Selektor div p izbere vse odstavke p, ki so kjer koli znotraj elementa div. Ni pomembno, ali so neposredni otroci ali globlje v strukturi.

div p {
    color: orange;
}

Pojasnilo: Obarvajo se vsi odstavki p, ki so znotraj elementa div, tudi tisti, ki niso neposredni otroci.

Neposredni otrok: div > p

Selektor div > p izbere samo tiste odstavke p, ki so neposredni otroci elementa div. Če je odstavek znotraj drugega elementa, na primer span, ne bo izbran.

div > p {
    color: orange;
}

Pojasnilo: Obarvajo se samo odstavki p, ki so neposredno v elementu div.

Neposredni naslednji sorojenec: div + p

Selektor div + p izbere samo tisti odstavek p, ki neposredno sledi elementu div. Izbran je le prvi naslednji sorojenec, če je ustrezne vrste.

div + p {
    color: orange;
}

Pojasnilo: Obarva se samo tisti odstavek p, ki neposredno sledi elementu div.

Vsi naslednji sorojenci: div ~ p

Selektor div ~ p izbere vse odstavke p, ki sledijo elementu div in imajo z njim istega starša. Ni nujno, da mu sledijo neposredno.

div ~ p {
    color: orange;
}

Pojasnilo: Obarvajo se vsi odstavki p, ki sledijo elementu div in imajo z njim istega starša. Med njimi so lahko tudi drugi elementi.

Primerjava zapisov

Priporočila

• Najprej razmisli, ali želiš združiti več selektorjev ali pa opisati odnos med elementi.
• Zapis selektor1, selektor2 uporabi takrat, ko želiš isti slog uporabiti za več različnih elementov.
• Za bolj natančno ciljanje elementov uporabi kombinator >, kadar potrebuješ samo neposredne otroke.
• Kombinator + uporabi, kadar želiš izbrati samo prvi naslednji element.
• Kombinator ~ uporabi, kadar želiš zajeti vse naslednje sorojence iste vrste.
• Pri pisanju selektorjev ohrani preglednost in se izogibaj predolgim izrazom brez potrebe.

Pogoste napake

• Zapis selektor1, selektor2 se razume, kot da bi opisoval odnos med elementoma, čeprav gre samo za združevanje selektorjev.
• Presledek se razume kot nepomemben razmik, čeprav pomeni kombinator za potomce.
• Zamenjuje se pomen potomca in neposrednega otroka.
• Kombinator + se uporablja, kot da bi izbral več naslednjih elementov.
• Kombinator ~ se uporablja med elementi, ki niso sorojenci.
• Predpostavlja se, da bodo kombinatorji delovali tudi med elementi na različnih ravneh drevesne strukture.