Селекторы атрибутов: краткий список

27 марта 2011. Рубрики: Рабочие заметки; автор — Юлия Панина aka Княгиня.

Чем дальше уходит в прошлое 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) на «Селекторы атрибутов: краткий список»
  1. DropIt (4 комментария)

    Мммм ) Я пользуюсь Selectvizr( selectivizr.com ) оченно полезная штука, чтобы не писать на элементы форм классы, айди и вообще не заморачиваться с селекторами. Рекомендую ;)

    Ответить на этот комментарий
    • Княгиня (652 комментария)

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

      Ответить на этот комментарий
      • DropIt (4 комментария)

        Шестой и седьмой ишаки где-то около плинтуса *CRAZY* Скоро вообше можно будет не думать об этом.

        Ответить на этот комментарий

Есть что сказать? Не молчим!

Используйте теги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" code=""> <ul> <li> <ol> .

Комментарии короче 200 символов публикуются без активной ссылки. Пробелы не учитываются.

Ссылки с комментариев dofollow. Ознакомьтесь, пожалуйста, с правилами dofollow-комментирования. Кто не читает, тот сам себе враг.