ძმობილი სელექტორი CSS-ში

ძმობილი სელექტორი ~ საშუალებას გაძლევთ აირჩიოთ ყველა ელემენტი, რომელიც მოცემული ელემენტის შემდეგ მდებარეობს ერთი მშობლის შიგნით.

სინტაქსი

სელექტორი1 ~ სელექტორი2 {
	
}

მოდით მივმართოთ ყველა p თეგს, რომელიც h2 თეგების შემდეგ მდებარეობს და გავაფერადოთ ისინი წითლად:

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

h2 ~ p {
	color: red;
}

მოდით მივმართოთ ყველა p თეგს, რომელიც .test კლასის მქონე ელემენტების შემდეგ მდებარეობს, და გავაფერადოთ ისინი წითლად:

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

.test ~ p {
	color: red;
}

მოდით მივმართოთ ყველა ელემენტს .elem კლასით, რომელიც .test კლასის მქონე ელემენტების შემდეგ მდებარეობს, და გავაფერადოთ ისინი წითლად:

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

.test ~ .elem {
	color: red;
}

შვილობილი სელექტორი,
რომელიც საშუალებას გაძლევთ აირჩიოთ ელემენტები პირდაპირი ჩასმის მიხედვით
კონტექსტური სელექტორი,
რომელიც საშუალებას გაძლევთ აირჩიოთ ელემენტი მისი მშობლის მიხედვით
მეზობელი სელექტორი,
რომელიც საშუალებას გაძლევთ აირჩიოთ ელემენტი მისი მეზობლის მიხედვით
უნივერსალური სელექტორი,
რომელიც საშუალებას გაძლევთ აირჩიოთ ყველა ელემენტი