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

Кыз (бала) селектору,
түздөн-түз ич аралык боюнча элементтерди тандоого мүмкүндүк берет
Контексттик селектор,
элементти анын ата-энеси боюнча тандоого мүмкүндүк берет
Көршү селектору,
элементти анын көршүсү боюнча тандоого мүмкүндүк берет
Универсалдык селектор,
бардык элементтерди тандоого мүмкүндүк берет