CSS හි සහෝදර තේරීම්කරු

සහෝදර තේරීම්කරු ~ එක් මාපියෙකු තුළ නිශ්චිත මූලද්‍රව්‍යයකට පසුව පිහිටා ඇති සියලුම මූලද්‍රව්‍ය තෝරා ගැනීමට ඉඩ සලසයි.

වාක්‍ය රචනය

තේරීම්කරු1 ~ තේරීම්කරු2 {
	
}

අපි h2 ටැග් වලට පසුව පිහිටා ඇති සියලුම p ටැග් වෙත යොමු වී ඒවා රතු පැහැයට අලෙවිසැල් කරමු:

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

h2 ~ p {
	color: red;
}

අපි .test පන්තියේ මූලද්‍රව්‍ය වලට පසුව පිහිටා ඇති සියලුම p ටැග් වෙත යොමු වී ඒවා රතු පැහැයට අලෙවිසැල් කරමු:

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

.test ~ p {
	color: red;
}

අපි .test පන්තියේ මූලද්‍රව්‍ය වලට පසුව පිහිටා ඇති සියලුම .elem පන්තියේ මූලද්‍රව්‍ය වෙත යොමු වී ඒවා රතු පැහැයට අලෙවිසැල් කරමු:

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

.test ~ .elem {
	color: red;
}