Brāļu selektors CSS

Brāļu selektors ~ ļauj atlasīt visus elementus, kas atrodas aiz norādītā elementa viena vecāka ietvaros.

Piemērs

Pievērsīsimies visiem p tagiem, kas atrodas aiz h2 tagiem, un iekrāsosim tos sarkanā krāsā:

<div>
	<h2>teksts</h2>
	<p>
		+++
	</p>
	<p>
		+++
	</p>
	<p>
		+++
	</p>
</div>
<p>
	-
</p>

h2 ~ p {
	color: red;
}

Pievērsīsimies visiem p tagiem, kas atrodas aiz elementiem ar klasi .test, un iekrāsosim tos sarkanā krāsā:

<div>
	<p class="test">
		teksts
	</p>
	<p>
		+++
	</p>
	<p>
		+++
	</p>
</div>
<p>
	---
</p>

.test ~ p {
	color: red;
}

Pievērsīsimies visiem elementiem ar klasi .elem, kas atrodas aiz elementiem ar klasi .test, un iekrāsosim tos sarkanā krāsā:

<div>
	<p class="test">
		teksts
	</p>
	<p class="elem">
		+++
	</p>
	<p>
		---
	</p>
	<p class="elem">
		+++
	</p>
</div>
<p>
	---
</p>

.test ~ .elem {
	color: red;
}

Dots kods:

<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>

Uzrakstiet selektoru, kas atlasīs visus elementus, kas atrodas tieši aiz elementa #elem.