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

შვილობილი სელექტორი > საშუალებას გაძლევთ აირჩიოთ ელემენტები ერთმანეთში უშუალო ჩადგმის მიხედვით.

სინტაქსი

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

მაგალითი

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

<p>
	ტექსტი <b>+</b>
</p>
<p>
	ტექსტი <i><b>-</b></i>
</p>

p > b {
	color: red;
}

მაგალითი

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

<p class="block">
	ტექსტი <b>+</b>
</p>
<p class="block">
	ტექსტი <i><b>-</b></i>
</p>
<p>
	ტექსტი <b>-</b>
</p>

.block > b {
	color: red;
}

მაგალითი

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

<p class="block">
	ტექსტი <span class="elem">+</span>
</p>
<p class="block">
	ტექსტი <i><span class="elem">-</span></i>
</p>
<p class="block">
	ტექსტი <span>-</span>
</p>
<p>
	ტექსტი <span class="elem">-</span>
</p>

.block > .elem {
	color: red;
}

იხილეთ აგრეთვე

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