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