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