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

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

К сожалению, в интернете полно примеров 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. А какие варианты применения этих селекторов знаете вы?

Отзывы (8) на «Селекторы атрибутов: примеры практического применения»
  1. jeku (3 комментария)

    Я знал некоторые вещи, но например о a[href*=»2011″]{
    text-decoration:none;
    border-bottom:3px double #000;
    }

    слышу впервые, спасибо!

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

      На здоровье. :) Если знаете что-то ещё — желательно, практическое, а не умозрительное на «когда браузеры станут умными» — то поделитесь.

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

        Я не знаю чем я могу удивить человека, который и так много знает :)
        Но подумаю…

        Ответить на этот комментарий
  2. Vladimir (3 комментария)

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

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

    Этот селектор больше для всяких hreflang’ов подходит.

    Например,

    <a hreflang="de-AT" href="…">

    И CSS типа:

    a[hreflang|="de"] {
    padding: 0 15px 0 0;
    background: url('flags/de.gif') no-repeat 100% 0;
    }

    Фактически это более короткая форма записи для

    a[hreflang="de"], a[hreflang^="de-"] {
    padding: 0 15px 0 0;
    background: url('flags/de.gif') no-repeat 100% 0;
    }

    /* Эх, ну почему в CSS нельзя XPath использовать… */

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

      Да, единственный пример применения селектора с дефисами, который я встречала, был связан именно с языковыми префиксами. Это было бы удобно на многоязычных сайтах, но с такими я крайне редко имею дело. А вот пометить таким макаром ссылку на иноязычный источник очень даже можно. Правда, это требует, эээ, высокой культуры вёрстки, :) и не только вёрстки.

      Эх, ну почему в CSS нельзя XPath использовать…

      Что да, то да. :) Сделать выборку «все элементы с вот таким потомком»… Но css потому и называются каскадными (cascad style sheets), что действуют сверху вниз, и никак иначе.

      Ответить на этот комментарий
  3. Vladimir (3 комментария)

    Сделать выборку «все элементы с вот таким потомком»

    Вот именно этого очень не хватает.

    Но css потому и называются каскадными

    С использованием XPath каскадность никак не нарушается. XPath — просто другой (имхо, более гибкий) способ указания целевых элементов.

    Ответить на этот комментарий
  4. Удивительный (9 комментариев)

    Вот бы мне раньше эту статью прочитать, недавно работал с селекторами, и приходилось с разных форумов по крупицам информацию вытягивать.

    Ответить на этот комментарий
  5. Kassel (5 комментариев)

    Чего же я раньше не заходил на ваш форум?)) Думаю легко наверстаю упущенное. Но все же жаль что мучался зря, в теме все расписано и четко изложено.

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

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

Используйте теги: <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-комментирования. Кто не читает, тот сам себе враг.