Чем дальше уходит в прошлое ie6, тем охотней я пользуюсь примочками css, доступными современным браузерам. Одна из таких возможностей — селекторы атрибута (attribute selectors), или селекторы по атрибутам.
Примечание: IE7 и 8 понимают селекторы атрибута только в том случае, когда у страницы указан правильный доктайп. В противном случае они утрачивают понятливость.
Название | Вид | Область действия |
---|---|---|
Селектор существования атрибута (existence attribute selector) | [имя атрибута] | Все элементы, имеющие этот атрибут (с любым значением) |
Селектор равенства атрибута (equality attribute selector) | [имя=«значение»] | Все элементы, имеющие данный атрибут с данным значением |
Селектор атрибута с пробелами (whitespase attribute selector) | [имя~=«значение»] | Элементы, имеющие этот атрибут с данным словом в списке значений |
Селектор атрибута с дефисом (hyphen attribute selector) | [имя|=«значение»] | Элементы, имеющие этот атрибут, при том, что его значение либо совпадает с указанной частью, либо начинается с неё и дефиса |
Селектор префикса атрибута (prefix attribute selector) | [имя^=«значение»] | Элементы, у которых значение данного атрибута начинается с указанной части |
Селектор суффикса атрибута (suffix attribute selector) | [имя$=«значение»] | Элементы, у которых значение данного атрибута оканчивается указанной частью |
Селектор подстроки атрибута (substring attribute selector) | [имя*=«значение»] | Элементы, у которых значение данного атрибута содержит указанную часть |
Между значением селектора и квадратным скобками не должно быть пробелов! Значение атрибута рекомендуется заключать в кавычки.
Селекторы атрибутом можно комбинировать друг с другом и другими селекторами:
input[type="text"]
- — выбраны элементы input типа text (текстовые поля)
input[type="text"].error
- — выбраны текстовые поля с классом error
td input[type="text"]
- —выбраны текстовые поля, заключённые в табличные ячейки
input[type="button"][onclick]
- — выбраны элементы input типа button (кнопка), на который повешено событие onclick
Селекторы существования, равенства, с пробелом и с дефисом определены в стандарте CSS2.1. Селекторы префикса, суффикса и подстроки определены в стандарте CSS3.
О том, как можно использовать селекторы атрибутов на практике, расскажу в следующий раз.
5 комментариев на «Селекторы атрибутов: краткий список»
DropIt (4 комментария)
Мммм ) Я пользуюсь Selectvizr( selectivizr.com ) оченно полезная штука, чтобы не писать на элементы форм классы, айди и вообще не заморачиваться с селекторами. Рекомендую
Княгиня (660 комментариев)
Возможно, попробую. Но вообще я не люблю скриптовые подпорки и стараюсь обходиться без них, пока это можно.
DropIt (4 комментария)
Шестой и седьмой ишаки где-то около плинтуса Скоро вообше можно будет не думать об этом.
IvanStapanov (3 комментария)
Через 8 лет после опубликования статьи выражаю признательность за проведенную работу :). Замечательное явление — селекторы атрибутов и поиск\ выбор элементов по ним — одно сплошное наслаждение… Спасибо!
Княгиня (660 комментариев)
На здоровье! А и правда — много уже воды утекло.