Селекторы

Селектор (англ. selector) – это та часть записи в CSS, которая отвечает за селекцию узлов HTML-документа, к которым будет применен указанный стиль. Например:

Селектор CSS и указание стиля

ul.navigation a {text-decoration: none;}

В примере, селектором является строка «ul.navigation a», который говорит о том, что стиль (в данном случае «text-decoration: none;»), будет применяться ко всем элементам a, которые находятся внутри элемента ul с классом «navigation», например для всех ссылок следующей структуры:

Фрагмент HTML к которому будет применен CSS

<ul class=”navigation”>

<li><a href=”#”>Home</a></li>

<li><a href=”#”>Catalog</a></li>

<li><a href=”#”>About Us</a></li>

</ul>

Селекторы бывают разных видов. Давайте их рассмотрим.

Начнем с самого простого, а именно с селектора элемента.

Селектор элемента

div {font-size: 12px;}

Название любого HTML-элемента может являться селектором. В примере выше, это «div», который означает, что стиль «font-size: 12px» будет применен ко всем элементам div документа.

Селекторы класса предназначены для определения стиля для элементов с предопределенным классом, т.е. значением атрибута «class»:

Селекторы класса

table.details {table-layout: fixed;}

.heading {color: #0f0;}

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

Напомню, что в соответствии со стандартом W3C, имя класса чувствительно к регистру. В любом случае, при написании имени класса, рекомендуется придерживаться правил, описанных в 4.3.

Еще одно замечание касается того, что в качестве значения атрибута class допускается перечисление нескольких классов, разделенных пробелом (см. также 6.2.4.4). Например:

Указание нескольких классов для элемента

<strong class=”temperature critical”>359</strong>

В данном случае к элементу strong будут применены значения стилей обоих классов: «temperature» и «critical».

Селектор по идентификатору, т.е. по значению атрибута id, выглядит схожим образом, что и селектор класса, за исключением символа разделителя. В этом случае это – «#». Селекторы по идентификатору можно использовать с тем же успехом, что и селекторы класса, однако следует помнить, что значение id должно быть уникальным в пределах одного HTML-документа. В документе не должно встречаться более одного элемента с одинаковым идентификатором. В отличие от класса, нельзя также указывать несколько идентификаторов для элемента через пробел.

Селектор по идентификатору

ul#navigation {background: #f0f0f0;}

#footer {border: 1px solid #f00;}

По аналогии с классом, имя элемента в селекторе указывать не обязательно.

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

Контекстный селектор

div.content-area p ul {list-style: none;}

Такая запись отменяет стиль отображения элементов списка по умолчанию для всех ненумерованных списков, которые находятся внутри параграфов, которые, в свою очередь находятся внутри элементов div с классом «content-area».

Контекстные селекторы используются для получения более компактного HTML-кода, для избежания указания одинаковых классов для элементов с неким общим родительским элементом. Например, код приведенный ниже:

HTML-фрагмент с повторяющимися классами

<ul id=”navigation”>

<li><a class=”nav-link” href=”#”>Home</a></li>

<li><a class=”nav-link” href=”#”>Catalog</a></li>

<li><a class=”nav-link” href=”#”>About Us</a></li>

</ul>

Может быть преобразован в код вида:

Оптимизированный HTML-фрагмент

<ul id=”navigation”>

<li><a href=”#”>Home</a></li>

<li><a href=”#”>Catalog</a></li>

<li><a href=”#”>About Us</a></li>

</ul>

Используя при этом контекстный селектор следующего вида:

Контекстный селектор

#navigation a {

/* styles go here */

}

В случае, когда нескольким селекторам должен соответствовать один и тот же стиль, можно воспользоваться группировкой селекторов, разделяя их запятой.

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

ul.navigation a,

a.cross-link {

/* styles go here */

}

Также необходимо иметь ввиду, что в CSS имеет место наследование, когда свойства, определенные для родительского элемента влияют на свойства элементов ему принадлежащих. Например, если мы определим цвет текста для элемента body, то такой же цвет текста будут иметь все элементы p в него входящие, до тех пор, пока эти свойства не будут переопределены другими селекторами.

W3C также предусматривает другие виды селекторов для CSS, помимо перечисленных, однако ввиду того, что на данный момент они поддерживаются не всеми браузерами, мы их рассматривать не будем.

Иногда возникает необходимость определить различные стили для разных типов браузеров. В связи с этим существует несколько решений, которые помогают сделать это без применения JavaScript. Эти решения рассмотрены в разделе 5.7.