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

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

სინტაქსი

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

მაგალითი

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

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

cssp > b {
  color: red;
}

Результат:

მაგალითი

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

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

css.block > b {
  color: red;
}

Результат:

მაგალითი

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

html<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>

css.block > .elem {
  color: red;
}

Результат:

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