Относительные селекторы в 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, и в коде они стоят после него.