Susedni selektor u CSS-u
Susedni selektor ~ omogućava odabir
svih elemenata koji se nalaze posle određenog
elementa unutar istog roditelja.
Primer
Hajde da pristupimo svim tagovima p,
koji se nalaze posle tagova h2, i obojimo
ih u crvenu boju:
<div>
<h2>text</h2>
<p>
+++
</p>
<p>
+++
</p>
<p>
+++
</p>
</div>
<p>
-
</p>
h2 ~ p {
color: red;
}
:
Primer
Hajde da pristupimo svim tagovima p,
koji se nalaze posle elemenata sa klasom .test,
i obojimo ih u crvenu boju:
<div>
<p class="test">
text
</p>
<p>
+++
</p>
<p>
+++
</p>
</div>
<p>
---
</p>
.test ~ p {
color: red;
}
:
Primer
Hajde da pristupimo svim elementima sa klasom
.elem, koji se nalaze posle elemenata
sa klasom .test, i obojimo ih u crvenu
boju:
<div>
<p class="test">
text
</p>
<p class="elem">
+++
</p>
<p>
---
</p>
<p class="elem">
+++
</p>
</div>
<p>
---
</p>
.test ~ .elem {
color: red;
}
:
Praktični zadaci
Dat je kod:
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li id="elem">5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
Napišite selektor koji će izabrati sve elemente,
koji se nalaze odmah posle elementa #elem.