CSS :: Селектор потомков
Селектор потомков
(от англ. descendant selector – селектор потомков)
выбирает все элементы требуемого типа, которые находятся внутри указанных в селекторе элементов-родителей (в селекторе вложенный элемент пишется
через пробел после элемента-родителя). Например, если задано правило div p span {блок объявлений}
, то стиль будет
применен ко всем элементам <span>, которые находятся внутри абзацев, в свою очередь
находящихся внутри элемента <div>.
Не нужно путать селектор потомков, в котором вложенные элементы отделяются от своих родителей пробелами, и список селекторов, к которым нужно применить один и тот же стиль, и которые отделяются друг от друга запятой.
Синтаксис
E F {блок объявлений}
Ссылки
Официальный сайт W3C: https://www.w3.org/TR/selectors-3/#descendant-combinators
Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/Descendant_combinator
Примеры
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Пример №1</title> <style> /* Селектор потомков выбирает элементы, */ /* вложенные в элементы-родители */ div p span{ color: red; font-weight: bold; } </style> </head> <body> <!-- Здесь span вложен в абзац, а тот в элемент «div» --> <div> <p> <span>Мой текст имеет красный цвет и полужирное начертание</span>. </p> </div> <span> Ко мне это правило не относится, ведь я же вложен только в тело документа. </span> </body> </html>
Пример №1