CSSтегиндеги бала селектору

Бала селектору > элементтерди бири-бирине түздөн-түз киргизилгендиги боюнча тандоого мүмкүндүк берет.

Синтаксис

cssселектор1 > селектор2 {
  
}

Мисал

p тегдеринин ичинде түздөн-түз жайгашкан бардык b тегдерине кайрылып, аларды кызыл түскө боёлу:

html<p>
  текст <b>+</b>
</p>
<p>
  текст <i><b>-</b></i>
</p>

cssp > b {
  color: red;
}

Результат:

Мисал

.block классы бар элементтердин ичинде түздөн-түз жайгашкан бардык b тегдерине кайрылып, аларды кызыл түскө боёлу:

html<p class="block">
  текст <b>+</b>
</p>
<p class="block">
  текст <i><b>-</b></i>
</p>
<p>
  текст <b>-</b>
</p>

css.block > b {
  color: red;
}

Результат:

Мисал

.block классы бар элементтердин ичинде түздөн-түз жайгашкан бардык .elem классы бар элементтерге кайрылып, аларды кызыл түскө боёлу:

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

Результат:

Ошондой эле караңыз