CSS селекторы. Часть первая

Подборка CSS селекторов, с данными по поддержке со стороны браузеров.

Выбор по имени тэга

Плюсы:

• Поддерживается всеми браузерами
• Нет необходимости вносить изменения в код

Минусы:

• Наименее гибкий способ. Стили применяются ко всем тэгам указанного типа

CSS:

/**
 * Весь текст, заключенный в тэги <p></p>, будет зеленого цвета
 */
p {
	color: #008040;
}

/**
 * Селектор применяется ко всем тэгам, перечисленным через запятую
 */
p, span, strong {
	color: #008040;
}

Чуть более гибкая вариация:

CSS:

/**
 * Стиль применяется ко всем тэгам <span>, вложенным в тэг <p>
 * Работает во всех браузерах
 */
p span {
	color: #f00;
}

HTML:

<p><span>Red string</span></p>

Выбор по ID или имени класса стилей

Плюсы:

• Поддерживается всеми браузерами
• Один тэг может наследовать несколько классов стилей

Минусы:

• Лишний код, который нужно дописывать руками
• ID у тэгов должны быть уникальны

И так, два типа селекторов я уже упомянул и они хорошо вам известны. Это выбор по ID тэга и по имени класса тэга:

CSS:

#element {
	color: #000080;
}

.element {
	color: #ff0000;
}

HTML:

<p id="element">By ID</p>

<p class="element">By class name</p>

Всем знакомо и понятно. Отмечу лишь один момент, о котором тоже не все знают. В коде страницы, один ID может встречаться только один раз. Иными словами, ID всегда должны быть уникальны, в отличие от класса. Браузеры, конечно, прожуют несколько неуникальных ID, но это скорее их упущение, нежели достоинство. Правила есть и их нужно соблюдать.

Выбор по имени атрибута и его значению

Плюсы:

• Можно выделить группу элементов (тэгов), не внося изменений в код

Минусы:

• Нет поддержки в IE6 и ниже

Селекторы, основанные на атрибутах и их значениях

CSS:

/**
 * Стиль применяется ко всем полям формы, имеющим тип text
 */
input[type="text"] {
	font-family: Tahoma;
}

Цепляться можно на любой атрибут и его значение, например, так:

CSS:

p[rel="blue"] {
	color: #000080;
}

p[rel="red"] {
	color: #ff0000;
}

HTML:

<p rel="blue">Blue text</p>

<p rel="red">Red text</p>

Увы, такой метод не будет работать в IE6 или более старых версиях этого чудовища. Если вы все еще переживаете насчет совместимости с этим мамонтом, придется забыть об этом способе (и, нужно признать, о большинстве тех, которые описаны ниже).

Можно выбирать элементы не только по строгому равно, но и еще несколькими способами. Описание принципа действия каждого дано в комментариях. Учитывайте, что ни один вариант не будет работать в Internet Explorer 6 и ниже.

CSS:

/**
 * Стиль применяется ко всем тэгам абзаца, имеющим параметр align. Значение параметра не принимается во внимание.
 */
p[align] {
	color: #a00;
}

/**
 * Все абзацы, значение title которых начинается со слова "some" (регистр имеет значения) будут выделены красным цветом.
 */
p[title^="some"] {
	color: #f00;
}

/**
 * Все абзацы, значение title которых заканчивается словом "test" (регистр имеет значения) будут выделены зеленым цветом.
 */
p[title$="test"] {
	color: #008040;
}

/**
 * Все абзацы, в значение title которых присутствует слово "text" (регистр имеет значения) будут выделены оранжевым цветом.
 */
p[title*="text"] {
	color: #ff8000;
}

HTML:

<p align="right" title"Something else">Test</p>
	
<p align="left" title="some text">First test</p>

<p align="center" title="some text test">Second test</p>

Цепочки селекторов

Как и следовало ожидать, почти никакой поддержки от IE6 ждать не приходится.

CSS: селектор *

/**
 * Стиль применяется ко всем элементам
 * Работает во всех браузерах
 */
* {
	text-decoration: underline;
}

CSS: селектор p > span

/**
 * Стиль применяется ко всем тэгам <span>, которые являются прямым потомком <p>
 * Не работает в IE6 и ниже
 */
p > span {
	color: #f00;
}

HTML:

<p><span>Красный текст</span></p>

<p><strong><span>Данный текст не будет красным, так как прямым потомком является strong</span></strong></p>

CSS: селектор p + span

/**
 * Стиль применяется ко всем тэгам <span>, идущим строго после тэга <p>
 * Не работает в IE6 и ниже
 */
p + span {
	color: #f00;
}

HTML:

<p>Текст в абзаце</p>
<span>Красный текст</span>

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

CSS: селектор p ~ span

/**
 * Стиль применяется ко всем тэгам <span>, идущим после тэга <p>
 * Не работает в IE6 и ниже
 */
p ~ span {
	color: #f00;
}

HTML:

<p>Текст в абзаце</p>
<div>Дивный текст</div>
<span>Красный текст</span>