Строитель к 
Dneprolab к 
Revski к Чем дальше уходит в прошлое 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.
О том, как можно использовать селекторы атрибутов на практике, расскажу в следующий раз.
Понравилось? Самое время поделиться заметкой!
Отзывы (3) на «Селекторы атрибутов: краткий список»
DropIt (4 комментария)
Мммм ) Я пользуюсь Selectvizr( selectivizr.com ) оченно полезная штука, чтобы не писать на элементы форм классы, айди и вообще не заморачиваться с селекторами. Рекомендую
Княгиня (242 комментария)
Возможно, попробую. Но вообще я не люблю скриптовые подпорки и стараюсь обходиться без них, пока это можно.
DropIt (4 комментария)
Шестой и седьмой ишаки где-то около плинтуса
Скоро вообше можно будет не думать об этом.