CSS комбинатор потомков
Поддержка браузерами
Описание
Комбинатор потомков используется для выбора одного или более элементов-потомков, не зависимо от их уровня вложенности, внутри элемента-предка.
Комбинатор потомков обозначается символом пробела, который ставится между двумя селекторами, указывая взаимосвязь между ними. Селектор стоящий слева от комбинатора определяется как элемент-предок, селектор стоящий справа от комбинатора определяется как элемент-потомок.
Рассмотрим, как это работает на небольшом примере:
Таким образом мы указали, что стиль будет применён ко всем элементам <span>, которые являются потомками элементов <div>.
Пример
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Название документа</title> <style> div span { background-color: yellow; } </style> </head> <body> <h1>Добро пожаловать!</h1> <div> <h2>Меня зовут <span>Арни</span>.</h2> <p>Я живу в <span>Дакбурге</span>.</p> </div> <p>Моего кота тоже зовут Арни.</p> </body> </html>
Результат данного примера
Добро пожаловать!
Меня зовут Арни.
Я живу в Дакбурге.
Моего кота тоже зовут Арни.