Обратная инженерия CSS-селекторов

2008-02-26 / Рубрика: CSS

Недавно я вспомнил, как в конце девяностых изучал CSS. Справочников у меня не было, инета тоже, а единственным источником знаний была куча сохранённых веб-страниц. Копаясь в кодах, я постепенно начинал разбирался в этой нелёгкой, но до жути интересной теме. Предлагаю вашему вниманию список распространённых (и не очень) CSS-правил, которые вы можете встретить в «чужих» CSS-файлах. Статья ориентирована на новичков.

Простые селекторы

h2 {…}
Оформление HTML-элемента h2.
.simple-class {…}
Оформление элементов, у которых указан класс simple-class (например <div class="simple-class">…</div> или <span class="simple-class">…</span). В данном случае сам тег не имеет значения, важен именно класс.
#trambleBox {…}
Оформление элемента, идентификатор которого — trambleBox (например <div id="trambleBox">…</div>). Это правило будет применяться к любому тегу, у которого будет задан id="trambleBox" (в HTML-документе идентификаторы не могут дублироваться).

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

a.external {…}
Оформление ссылки с классом external (что-то вроде <a class="external" href="http://x28.ru">…</a>).
div#footer {…}
Оформление элемента div с идентификатором footer (<div id="footer"></div>).
.smile-box.other-color {…}
Этот селектор оформит любой HTML-элемент, у которого будут заданы несколько классов (<b class="smile-box other-color">…</b>).
.russian.english.china.japanese.france {…}
Этот более усложнённый вариант предыдущего селектора оформит любой HTML-элемент у которого будут заданы 5 перечисленных классов: <div class="russian english china japanese france">…</div>
h1[class] {…}
Такой селектор оформит любой элемент h1, у которого задан атрибут class (не работает для Internet Explorer до 6 версии включительно. IE7 автор не проверял.). Например <h1 class="newsheader">…</h1> или <h1 class="sidebar">…</h1>. Какой именно класс задан — не имеет значения.
a[href~="yandex"] {…}
Оформление любой ссылки, в атрибуте href которой содержится слово yandex (<a href="http://www.yandex.ru/search">…</a>). В IE не работает.

Группировка селекторов

h1, h2 {…}
Таким образом стили будут применены ко всем элементам h1 и h2.
code, xmp, pre {…}
 
Оформить теги code, xmp, pre.

Иерархические селекторы

h1 a {…}
Такое правило означает, что надо оформить все ссылки, которые находятся внутри тега h1 (например, <h1><a href="http://x28.ru">…</a></h1> или <h1><span class="chto-to-s-chem-to"><a href="http://x28.ru">…</a></span></h1>).
table div li a {…}
А это правило оформит только те ссылки, которые находятся внутри тега li, который в свою очередь находится в теге div, и всё это расположено в таблице: <table><tr><td>…<div><ul><li>…</li><li>…</li></ul></div></td></tr></table>.
.forumwrap strong {…}
Такое правило оформит все элементы strong, которые содержатся в элементах с классом forumwrap (Например, <div class="forumwrap">…<strong>…</strong></div>).
div>img {…}
В данном примере селектор > означает, что правило должно применяться к картинкам, которые расположены сразу в начале тега div. Например, <div><img src="…" /></div>. А вот в этом случае не будет работать: <div><p><img src="…" /></p></div>, потому что теперь img не является дочерним для тега div.
h1 + p {…}
Такое правило что нужно оформить параграф, который идёт сразу за заголовком первого уровня (<h1>Гиперзаголовок</h1><p>Небольшой четырёхсловный сестринский элемент</p>). Такая конструкция тоже не распознаётся Internet Explorer вплоть до версии 6.

Селекторы псевдоклассов

a:hover {…}
Оформление ссылки при наведении на неё курсора мышки. Будет работать для всех ссылок документа, для которых не задано другое правило.
a:visited:hover {…}
Офомление посещённых ссылок при наведении на них курсора мышки.

Различные комбинации

body.news h1 a, body.news h2 a {…}
Правило оформляет все ссылки, которые вложены в теги h1 или h2, которые в свою очередь вложены в тег body с классом news.
ul.friendslista li a:hover {…}
Правило, которое задаёт оформление ссылки, которая находится внутри элемента li списка ul с классом friendslista.
div.clear-block > ul li.natural:first-child {…}
А это вам домашнее задание.

Полагаю, что тема остаётся открытой, поэтому если у вас есть интересные или непонятные образцы CSS-правил — оставляйте в комментах, будем разбираться и пополнять статью.

Тема селекторов популярно разжёвана в глобальной мега-книжке Эрика Мейера «CSS — каскадные таблицы стилей». Начинающим верстальщикам обязательна к прочтению.

Автор — Полухин Владимир

Дата написания — 2008-02-25