Дочерний селектор
Урок 7 из 15 курса Селекторы CSS на Coddy.
Дочерний селектор — это тип селектора CSS, который выбирает все элементы, являющиеся прямыми потомками (детьми) указанного элемента. Дочерний селектор обозначается знаком «больше» (>) между двумя селекторами.
Пример:
Рассмотрим следующую структуру HTML:
<div class="parent">
<p>This is a direct child paragraph.</p>
<div>
<p>This is an indirect child paragraph.</p>
</div>
</div>Чтобы выбрать прямой дочерний абзац, вы должны использовать дочерний комбинатор следующим образом:
.parent > p {
color: blue;
}В этом примере только прямой дочерний абзац станет синим, а не тот, который вложен во внутренний <div>.
Дочерние селекторы также можно использовать, чтобы избежать стилизации элементов, которые не являются прямыми потомками указанного элемента. Например, вы можете использовать дочерний селектор, чтобы сделать красными все ссылки, которые являются прямыми потомками элемента p.
Задание
ЛегкоУчитывая следующую структуру HTML, создайте CSS-правило, используя дочерний комбинатор, чтобы стилизовать прямые элементы списка внутри элемента <ul> так, чтобы они имели фоновый цвет yellow.
Попробуйте сами
<html>
<head>
<title>Child Selector Exercise</title>
<style>
/* CSS Code goes here */
</style>
</head>
<body>
<ul class="list">
<li>This is a direct list item.</li>
<div>
<li>This is an indirect list item.</li>
</div>
</ul>
</body>
</html>