Načrtovanje in razvoj spletnih aplikacij

Verige selektorjev v CSS

Različne osnovne selektorje z omejitvami lahko povežemo v poljubno dolgo verigo, pri čemer sosednja člena povežemo z enim izmed spodnjih operatorjev. Okoli operatorjev >, + in ~ lahko zaradi preglednosti pišemo presledke, niso pa obvezni.

Veriga Pomen
selektor1 selektor2 tiste pojavitve selektorja2, ki so potomci pojavitev selektorja1
selektor1 > selektor2 tiste pojavitve selektorja2, ki so neposredni potomci pojavitev selektorja1
selektor1 + selektor2 tiste pojavitve selektorja2, ki so neposredni nasledniki pojavitev selektorja1 (na istem nivoju)
selektor1 ~ selektor2 vse pojavitve slektorja2, ki so neposredni nasledniki pojavitev selektorja1

Primeri uporabe verige in operatorjev:

<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>
div p {
    color: orange;
}

To je odstavek Paragraph 1 v elementu div.

To je odstavek Paragraph 2 v elementu div.

To je odstavek Paragraph 3 v elementu div.

To je odstavek Paragraph 4, ki ni v elementu div.

To je odstavek Paragraph 5, ki ni v elementu div.

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


div > p {
    color: orange;
}

To je odstavek Paragraph 1 v elementu div.

To je odstavek Paragraph 2 v elementu div.

To je odstavek Paragraph 3 v elementu div.
(Ni otrok, je pa potomec!)

To je odstavek Paragraph 4, ki ni v elementu div.

To je odstavek Paragraph 5, ki ni v elementu div.

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


div + p {
    color: orange;
}

To je odstavek Paragraph 1 v elementu div.

To je odstavek Paragraph 2 v elementu div.

To je odstavek Paragraph 3 v elementu div.

To je odstavek Paragraph 4, ki ni v elementu div.

To je odstavek Paragraph 5, ki ni v elementu div.

Pojasnilo: Obarva se tisti odstavk p, ki je neposredni naslednik elementa div.


div ~ p {
    color: orange;
}

To je odstavek Paragraph 1 v elementu div.

To je odstavek Paragraph 2 v elementu div.

To je odstavek Paragraph 3 v elementu div.

To je odstavek Paragraph 4, ki ni v elementu div.

To je odstavek Paragraph 5, ki ni v elementu div.

Pojasnilo: Obarvajo se vsi tisti odstavki p, ki niso del elementa div.