В предыдущих руководствах мы рассмотрели селекторы HTML, селекторы классов и идентификаторов, а также то, как комбинировать селекторы для нацеливания на определённые поля элементов. Используя три крошечных символа, вы можете дополнительно точно определить элемент, уменьшая необходимость раздувать свой HTML атрибутами class и ID.
Универсальные селекторы
Используя звёздочку (“ * ”), вы можете настроить таргетинг на все, что находится под солнцем. Вы можете использовать его самостоятельно для установки глобальных стилей для страницы или как потомок селектора для установки стилей всего внутри чего-либо.
Следующее, например, установит поля и отступы для всего на странице равными нулю, а все внутри элемента с идентификатором “контакт” будет отображаться в виде блока:
* { margin: 0; padding: 0; } #contact * { display: block; }
Использование автономного универсального селектора обычно используется для “сброса” многих стилей браузера по умолчанию. Установка поля равным нулю, например, уничтожит все интервалы между абзацами, заголовками и кавычками.
Дочерние селекторы
Символ большего значения (“>”) может использоваться для указания чего-то, что является дочерним элементом чего-то другого, то есть чего-то, непосредственно вложенного во что-то.
Итак, с помощью этого HTML…
<ul id="genus_examples"> <li>Кошки <ul> <li>Пантера</li> <li>Тигр</li> <li>Гепард</li> </ul> </li> <li>Обезьяны <ul> <li>Орангутанг</li> <li>Шимпанзе</li> <li>Макака</li> </ul> </li> </ul>
… и следующий CSS…
#genus_examples > li { border: 1px solid red }
… красная рамка будет нарисована только вокруг “Кошек” и “Обезьян”, а не вокруг каждого отдельного элемента списка (что было бы в случае с
#genus_examples li { border: 1px solid red })
Это потому, что подобные “Пантера” и “Тигр” являются внуками “genus_examples”, а не детьми.
Смежные селекторы
Знак плюса (“+”) используется для определения соседнего родственного элемента, по сути, чего-то, следующего за чем-то.
Со следующим HTML:
<h1> Облачные леопарды </h1> <p> Облачные леопарды ─ это кошки, принадлежащие к роду Неофелис.</p> <p> Существует два сохранившихся вида: Neofelis nebulosa и Neofelis diardi.</p>
… и CSS…
h1 + p { font-weight: bold }
Только первый абзац, следующий за заголовком, будет выделен жирным шрифтом.
Другой, CSS 3, селектор “general sibling” использует тильду (“~”) и будет сопоставлять элемент, следующий за другим, независимо от его непосредственности.
Итак, в приведённом примере:
h1 ~ p { font-weight: bold }
все абзацы будут оформлены после заголовка верхнего уровня, но если бы перед p были какие-либо h1, они не были бы затронуты.
Страницы в тему:
- Следующая страница: Всё, что можно о цветах в CSS
- Предыдущая страница: Тени
- Группировка и вложение
- Селекторы атрибутов
- Селекторы CSS