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 |
tiste pojavitve selektorja2, ki so neposredni potomci pojavitev selektorja1 |
selektor1 |
tiste pojavitve selektorja2, ki so neposredni nasledniki pojavitev selektorja1 (na istem nivoju) |
selektor1 |
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
.