Селекторы

Селектор (англ. 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.

Псевдоклассы и псевдоэлементы

Псевдокласс (англ. pseudo-class) – класс, который существует не зависимо от того, объявлен атрибут class для элемента или нет. Такие классы существуют всегда и предусмотрены для некоторых элементов и их состояний. Самые часто используемые псевдоклассы это псевдоклассы элемента a. Для него существует четыре псевдокласса, в соответствии с состоянием этого элемента на текущий момент времени: hover, link, visited и active.

Псевдокласс hover позволяет определить стиль для гиперссылок, находящихся под курсором мыши в текущий момент времени; link – это еще не посещенные гиперссылки, visited – уже посещенные гиперссылки; active – активные или открываемые в данный момент ссылки. Чаще всех используется псевдокласс hover.

Синтаксически, псевдокласс указывается в селекторе после знака двоеточия.

Псевдокласс

a:hover {text-decoration: underline;}

Такая запись добавит эффект подчеркивания ссылки при наведении на нее мышкой. Разумеется это имеет смысл только когда эффект подчеркивания для ссылок отменен по умолчанию.

Псевдокласс может быть использован в комбинации с обычным классом. При этом порядок записи названий классов особой роли не играет, но принято псевдоклассы писать в самом конце простого селектора.

Комбинация класса и псевдокласса

a.nav-link:hover {color: #000;}

Многие современные браузеры имеют псевдокласс hover, предопределенный для всех HTML-элементов, в то время как, например браузер Internet Explorer 6.0 понимает псевдокласс hover только для элементов a. Использование псевдокласса hover позволяет делать некоторые интересные эффекты, вроде многоуровневого меню на основе CSS без использования JavaScript.

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

Псевдоэлемент (англ. pseudo-element) – это элемент или мнимый элемент, характеризующийся определенным критерием, и к которому могут быть отдельно применены CSS-свойства. Псевдоэлементы редко используются по причине плохой их поддержки различными браузерами, поэтому на данном этапе рассматриваться не будут.

Дата добавления: 2014-12-16