Селекторы атрибутов: примеры практического применения

К сожалению, в интернете полно примеров css-технологий будущего, которые сейчас поддерживаются не всеми браузерами, а найти что-нибудь практическое, кроссбраузерное и применимое прямо сейчас, надо постараться. Селекторы атрибутов как раз относятся к категории практического. Привожу ряд примеров, как можно использовать этот тип селекторов на живых реальных сайтах.

Краткий список селекторов атрибутов смотрим в предыдущей части.

Селектор существования атрибута

[onclick]{
  cursor:pointer;
}

Все элементы, на которые навешено событие onclick при помощи одноимённого атрибута, при наведении выделятся курсором в виде пальчика.

Селектор равенства атрибута

Позволяет гибко оформлять элементы форм.

input[type="text"], input[type="password"]{
  width:300px;
  border:1px solid green;
}

— оформление текстовых полей.

input[type="submit"],
input[type="button"]{
  width:30px;
  height:21px;
  padding:0 0 0 30px;
  overflow:hidden;
  cursor:pointer;
  border:none;
  background:url('button.gif') no-repeat;
  color:transparent;
}

— оформление кнопок. (Последний пример — отсюда: графическое оформление кнопок.)

input[type="submit"][disabled],
input[type="button"][disabled],
input[type="submit"][disabled]:hover,
input[type="button"][disabled]:hover{
  cursor:default;
}

— оформление неактивной (disabled) кнопки; здесь для неё отменяется курсор «пальчик», назначенный активным кнопкам, но можно также подложить другой фон, сделать другой цвет, рамку, и пр.

input[type="checkbox"], input[type="radio"]{
margin:0 5px 0 0;
vertical-align:middle;
}

— оформление переключателей и флажков.

Также позволяет при необходимости выделить один элемент по уникальному значению атрибута, например, картинку по её урлу:

img[src="myPicture.gif"]{
  border:2px solid red;
}

Интересно, что ИЕ может не понять запись [type="text"], если ей не предшествует селектор по типу элемента (input). Так же ИЕ не понимает запись:

td[colspan]

в обязательном порядке требуя указать значение атрибута:

td[clospan="3"]

а также не понимает селекторы с атрибутом style.

А ие7 почему-то не понимает конструкцию с атрибутом «for»:

label[for="field_name"]

Селектор равенства атрибута может применяться для атрибутов class и id: определение [class="myClass"] == определению . myClass. При этом вес определений [id="myId"] и #myId будет разным в силу разной специфичности селекторов.

Селектор атрибута с пробелами

a[rel~="nofollow"]{
  text-decoration:none;
  border-bottom:1px dotted 1px;
}
a[rel~="external"]{
  padding:0 15px 0 0;
  background:url('external.gif') no-repeat 100% 0;
}
a[rel~="my"]{
  padding:0 15px 0 0;
  background:url('home.gif') no-repeat 100% 0;
}
a[rel~="friend"]{
  padding:0 15px 0 0;
  background:url('heart.gif') no-repeat 100% 0;
}

Селектор атрибута с дефисами

Скажу честно, не придумала универсального и вменяемого способа его применения.

Селектор префикса атрибута

a[href^="javascript"]{
  cursor:move;
}

— выделит формой указателя мыши ссылки, содержащие джаваскрипт.

[href^="/"]{
  color:green;
}

— выделит указанным цветом только внутренние ссылки.

[href^="http"]{
  padding:0 15px 0 0;
  background:url('outbound.gif') no-repeat 100% 0;
}

— пометит пиктограммкой ссылки, ведущие на другие сайты.

[href^="ftp"]{
  padding:0 15px 0 0;
  background:url('ftp.gif') no-repeat 100% 0;
}

— отметит пиктограммкой ссылки на фтп.

Селектор суффикса атрибута

[href$='jpg'], [href$='gif'], [href$='png']{
  padding:0 15px 0 0;
  background:url('pic.gif') no-repeat 100% 0;
}
[href$='zip'], [href$='rar'], [href$='gz']{
  padding:0 15px 0 0;
  background:url('zip.gif') no-repeat 100% 0;
}
[href$='exe']{
  padding:0 15px 0 0;
  background:url('exe.gif') no-repeat 100% 0;
}

— позволит по-разному оформить ссылки на файлы с разным расширением.

Селектор подстроки атрибута

Целиком и полностью зависит от фантазии вебмастера. Самый скучный пример:

img[alt*="Пушкин"]{
  border:1px solid red;
}

— выделит красной рамкой все картинки со словом «Пушкин» в атрибуте alt; а

a[href*="2011"]{
  text-decoration:none;
  border-bottom:3px double #000;
}

сделает двойное подчёркивание (нижнюю рамку) ссылкам на посты за текущий год. Может, и непрактично, но оригинально.

Также селекторы атрибутов бывают полезны при использовании jquery. А какие варианты применения этих селекторов знаете вы?