5.2.1 Универсальный селектор

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

* {

padding: 0;

margin: 0;

}

5.2.2 Селектор типа

Предназначен для выбора всех элементов определенного типа. Стили применяются ко всем элементам указанного типа не зависимо от уровня вложенности. Применяется для задания общих, для всех элементов определенного типа, стилей. Общий вид:

Имя тега { описание }

Пример. Для всех абзацев (тег p) установить размер шрифта 12px.

p {font-size: 12px;}

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

Предназначен для выбора всех элементов по имени класса (по значению атрибута class). Стили применяются к любым тегам с соответствующим классом. Важно учитывать, что в отличие от названий HTML-тегов, в названиях классов различаются большие и маленькие буквы. То естьclass="active"иclass="Active"– это совсем разные классы. Общий вид:

.Имя класса { описание }

Пример. Задать зеленый цвет текста в любых тегах с классомactive.

.active {color: #0f0; }

Комбинируя селектор класса и селектор типа, можно объединить их свойства.

Пример. Задать зеленый цвет текста только для абзацев с классомactive.

p.active {color: #0f0; }

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

<div class="panel hint active"></div>

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

Пример. Правило распространяется только на элементы, в списке классов которых встречаются (в любом порядке) и классpopupи классactive.

.popup.active { color: #0f0;}

Концепция классов, наиболее часто применяется при верстке. Например, верстать страницу, используя в качестве контейнеров теги div, задавая им определенные классы (в соответствии с функциональным назначением):

<div class="header">

<!--элементы шапки сайта-->

</div>

<div class="sideBar">

<!--элементы панели меню-->

</div>

<div class="content">

<!--основное содержимое-->

</div>

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

Предназначен для выбора элемента по уникальному идентификатору (значению атрибута id). Позволяет задать стили конкретному HTML-элементу. Общий вид:

#Имя идентификатора { описание }

Пример. Задать зеленый цвет текста в любом теге с id="active"

#active { color: #0f0; }

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

Пример. Задать зеленый цвет только для элемента списка с данным id.

li#active { color: #0f0; }

5.2.5 Селектор атрибутов

Предназначен для выбора всех элементов по наличию или значению заданного атрибута. IE6 не понимает этот селектор. Способы задания:

Element[attrName]{ описание } – элементы с атрибутом

[attrName] { описание } – любой элемент с атрибутом

Пример. Выделим жирным шрифтом все элементы, для которых задана всплывающая подсказка:

[title] {font-weight: bold;}

Element [attrName=attrValue]{ описание } – элемент с заданным значением атрибута

Пример. Зададим цвет фона только для техinput, значение атрибутаtypeкоторых в равно "submit" (для кнопки отправки формы).

input[type="submit"] {background: #0f0;}

Element[attrName~=attrValue] { описание } – элементы, заданный атрибут которых в перечне значений имеет определенное слово.

Пример. Зададим обтекание для тех элементовdiv, в перечне значений атрибутаclass, которых присутствует "sideBar" (вот это-то и есть, фактически, селектор класса):

div[class~="sideBar"] { float: left; }

<!--Будут выбраны элементы:-->

<div class="sideBar"><div>

<div class="sideBar userBar"><div>

<div class="contentPanel sideBar"><div>

<!--Не будет выбран элемент:-->

<div class="sideBarInner"><div>

Element[attrName|=attrValue] { описание } –элементы, заданный атрибут которых равен определенному значению или начинается с этого значения, после которого идет дефис.

Пример. Зададим стили для всех элементов, язык которых задан в атрибутах, как английский (en, en-us, en-gb, en-au и т.д.):

[lang|="en"] { какие-то стили }

<!--Будут выбраны элементы:-->

<div lang="en"><div>

<div lang="en-us"><div>

<p lang="en-au"><p>

<!--Не будут выбраны элементы:-->

<div lang="ru"><div>

<div lang="english"><div>

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

Element[attrName^=attrValue] – все элементы, заданный атрибут которых начинается с определенного значения.

Пример. Зададим стили для всех элементов, атрибут title которых начинается со слова "Hint":

[title^="Hint"] { какие-то стили }

<!--Будут выбраны элементы:-->

<div title="Hint. Did you know that…"><div>

<div title="Hint…"><div>

<span title="Hinting…"><span>

<!--Не будет выбран элемент:-->

<div title="Important Hint…"><div>

Element[attrName$=attrValue] – все элементы, заданный атрибут которых оканчивается на определенное значение.

Пример. Зададим стили для всех элементов img, с расширениемgif:

<!--Будет выбран элемент:-->

<img src="/images/user.gif" height="64px" width="64px" alt="аватарка"/>

<!--Не будет выбран элемент:-->

<img src="/images/user.png" height="64px" width="64px" alt="аватарка"/>

Element[attrName*=attrValue] – все элементы, заданный атрибут которых содержит определенную подстроку.

Пример. Зададим стили для всех ссылок, в адресах которых есть подстрока "xiper.net"

a[href*="xiper.net"] { какие-то стили }

<!--Будут выбраны элементы:-->

<a href="http://www.xiper.net/">Главная</a>

<a href="xiper.net">Это тоже главная</a>

<a href="http://www.xiper.net/learn/css/">Уроки CSS</a>

<!--Не будет выбран элемент:-->

<a href="www.xipernet">Ошибка в адресе!</a>

Для любых, из перечисленных выше селекторов можно сделать выбор сразу по нескольким атрибутам. Например:

img[width][height][alt] {

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

}

a[title][href*="xiper.net"] {

эти стили применятся только к ссылкам, в адресах которых есть подстрока "xiper.net" и для которых задан атрибут title

}