Селектор потомков
Урок 8 из 15 курса Селекторы CSS на Coddy.
В предыдущей теме мы узнали о дочернем комбинаторе, который выбирает прямых потомков элемента. Теперь давайте изучим селекторы потомков, которые обозначаются пробелом. Селектор потомков позволяет выбирать элементы, вложенные в другой элемент на любом уровне, а не только прямых потомков.
Синтаксис
selector1 selector2 {
/* property declarations */
}Например,
<html>
<head>
<title>Combinator</title>
<style>
div p {
color: red;
font-size: 2em;
}
</style>
</head>
<body>
<div>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
</body>
</html>Приведенное выше правило CSS окрасит оба абзаца в красный цвет и установит размер шрифта 2em.
Как это соотносится с дочерними селекторами?
Селектор потомков является более общим, чем дочерний селектор. Это означает, что селектор потомков будет соответствовать всем элементам, которые являются потомками указанного элемента, в то время как дочерний селектор будет соответствовать только тем элементам, которые являются прямыми потомками указанного элемента.
Например, селектор div p будет соответствовать всем элементам p, которые являются потомками элемента div, включая элементы p, вложенные в другие элементы. Селектор div > p будет соответствовать только тем элементам p, которые являются прямыми потомками элемента div.
Задание
ЛегкоОсновываясь на предыдущем упражнении, давайте будем использовать ту же структуру HTML. Напишите CSS-правило, используя селектор потомков, чтобы стилизовать все абзацы внутри элемента .list, независимо от уровня их вложенности. Задайте им новый цвет, размер и шрифт по своему усмотрению.
Попробуйте сами
<html>
<head>
<title>Descendant Selector Exercise</title>
<style>
/* CSS Code goes here */
</style>
</head>
<body>
<div>
<p>This paragraph is not inside a list</p>
<ul class="list">
<li>
<p>This is a paragraph inside a list item.</p>
</li>
<li>
<div>
<p>This is a paragraph inside a nested div within a list item.</p>
</div>
</li>
</ul>
</div>
</body>
</html>