Относительные селекторы в CSS3
Селектор потомка (AB)
Вы определенно знакомы с этим видом селекторов. Вложенный селектор указывает на любой элемент B, который происходит от элемента A(потомок, потомок потомка и т. д.). Например, ol 1 і выберет на странице все элементы li, находящиеся внутри нумерованных списков. Однако в числе прочих это будут также и элементы 1 і в ненумерованных списках, помещенные внутрь нумерованных – а это вряд ли то, чего вы хотите.
Селектор дочернего элемента (A > B)
Этот селектор адресуется к любым элементам B, являющимся прямым потомком элемента A, все прочие наследники будут проигнорированы. Возвращаясь к приведенному выше примеру, ol > li позволит выбрать все элементы в нумерованных списках, при этом другие элементы выбраны не будут.
Селектор сестринского элемента (A + B)
Этот селектор таргетирует любой элемент B, имеющий того же самого предка, что и A, и следующего следом за A в разметке. Например, li + li выделит все в данном контейнере.
Селектор обобщенных родственных элементов (A ~ B)
Основная задача селектора обобщённых родственных элементов — выбор элемента (-ов), идущего после заданного элемента, и имеющего с ним общего родителя.
Обозначается всё это вот так:
A~B {style}, гдеAиB — строковые значения, определяющие селектор.style — применяемые свойства.
Пример:
HTML:
<article>
<h1>Заголовок</h1>
<h2>Подзаголовок 1</h2>
<p>Это абзац с текстом</p>
<h2>Подзаголовок 2</h2>
<span>Это текст, обрамлённый в span</span>
</article>
CSS:
h1~h2 {
color:red;
}
В результате в красный цвет окрасятся заголовки h2, т.к. у них общий родительский элемент с заголовком h1, и в коде они стоят после него.