CSS-тегі туыс селекторы

Туыс селекторы ~ бір ата-ананың ішінде берілген элементтен кейін орналасқан барлық элементтерді таңдауға мүмкіндік береді.

Синтаксис

селектор1 ~ селектор2 {
	
}

h2 тегтерінен кейін орналасқан барлық p тегтеріне сәйкес келіп, оларды қызыл түске бояйық:

<div>
	<h2>мәтін</h2>
	<p>
		+
	</p>
	<p>
		+
	</p>
	<p>
		+
	</p>
</div>
<p>
	-
</p>

h2 ~ p {
	color: red;
}

.test сыныбы бар элементтерден кейін орналасқан барлық p тегтеріне сәйкес келіп, оларды қызыл түске бояйық:

<div>
	<p class="test">
		мәтін
	</p>
	<p>
		+
	</p>
	<p>
		+
	</p>
</div>
<p>
	-
</p>

.test ~ p {
	color: red;
}

.test сыныбы бар элементтерден кейін орналасқан .elem сыныбы бар барлық элементтерге сәйкес келіп, оларды қызыл түске бояйық:

<div>
	<p class="test">
		мәтін
	</p>
	<p class="elem">
		+
	</p>
	<p>
		-
	</p>
	<p class="elem">
		+
	</p>
</div>
<p>
	-
</p>

.test ~ .elem {
	color: red;
}