• Выполняемая задача - выбор всех элементов по наличию или значению заданного атрибута.
  • Обозначение - запись, определяющая тип селектора в квадратных скобках.

Важно! IE6 не понимает этот селектор.

Подробнее про селектор атрибутов Выбор по наличию атрибута

Выбираем все элементы, у которых существует (задан в HTML) данный атрибут.

Синтаксис:

Element

Тут и далее Element , это какой-либо простой селектор (div , p , .header , div#popup , * и т.д.). Отсутствие в коде Element обозначает, что в этом месте стоит , который, в этой ситуации можно опустить.

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

{ font-weight: bold; }

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

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

Синтаксис:

Element

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

Input { background: #0f0; }

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

Выбираем все элементы, заданный атрибут которых в перечне значений имеет определенное слово.

Синтаксис:

Element

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

Div { float: left; }

Выбор по конкретным значениям атрибутов

Выбираем все элементы, заданный атрибут которых равен определенному значению или начинается с этого значения, после которого идет дефис.

Синтаксис:

Element

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

{ /* какие-то стили */ }

Новые селекторы атрибутов в CSS3

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

Выбор по началу значения атрибута

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

Синтаксис:

Element

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

{ /* какие-то стили */ }

Выбор по окончанию значения атрибута

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

Синтаксис:

Element

Пример. Зададим стили для всех элементов , которые ссылаются на гифки:

Img { /* какие-то стили */ }

Выбор по подстроке в значении атрибута

Выбираем все элементы, заданный атрибут которых содержит определенную подстроку.

Синтаксис:

Element

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

A { /* какие-то стили */ }

Это тоже главная