Составные селекторы. Комбинаторы

Предыдущая статья Селекторы псевдоэлементов.

Во вводной статье Селекторы: общие сведения мы с тобой договорились, что селекторы бывают двух типов — простые и составные. Все рассмотренные ранее селекторы были простыми. Теперь пришла пора познакомиться и с составными.

На самом деле все очень просто. Составные селекторы получаются при объединении простых с помощью специальных символов — комбинаторов.

Составные селекторы очень удобны, так как они позволяют выбирать элементы на основании их размещения в дереве документа. То есть при выборе можно, например, манипулировать такими понятиями как «является потомком», «следует за», «лежит непосредственно внутри».

Если ты не очень хорошо ориентируешься в дереве документа и хочешь разобраться в этом вопросе детальнее, то прежде чем продолжать чтение, ознакомься со статьей Дерево документа HTML.

Если учесть, что вид и количество простых селекторов, связываемых комбинаторами, никто не ограничивает, то становится понятно, какой мощный инструмент вложили в наши руки разработчики CSS. Используя составные селекторы можно, допустим, задать стили для ссылки, на которую навели мышкой, внутри абзаца, который расположен сразу за заголовком h1, при условии, что они (абзац и заголовок) находятся внутри контейнера с определенным классом.

Конечно, вышеприведенный пример может показаться несколько абсурдным. Тем не менее он неплохо иллюстрирует мощь составных селекторов.

Итак, весь секрет в комбинаторах — маленьких символах, наделенных большими полномочиями.

Табличка комбинаторов

Теперь давай познакомимся с составными селекторами подробнее. Итак, начнем. Прошу любить и жаловать — селектор потомка