Специальные селекторы по атрибутам тега. Селекторы CSS
- Выполняемая задача - выбор всех элементов по наличию или значению заданного атрибута.
- Обозначение - запись, определяющая тип селектора в квадратных скобках.
Важно! 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 { /* какие-то стили */ }
Это тоже главная