Главная » Полезные статьи » HTML-верстка » Селекторы атрибутов CSS: совпадение по подстроке
Распечатать статью

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

В спецификации CSS3 есть три селектора атрибутов, которые позволяют проверять значение данного атрибута на соответствие строке. Данные селекторы еще называются селекторами атрибутов с совпадениями по подстроке, и открывают бесконечные возможности по их использованию, поэтому о них стоит помнить. Что особенно приятно, такие селекторы поддерживаются многими старыми браузерами, вплоть до IE7, так что их можно применять в современных проектах, хотя тщательное тестирование всё равно нужно.

Приведу краткое описание каждого из селекторов с примерами.

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

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

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

В данном примере используется символ вставки (^), чтобы сообщить браузеру: «Если данная ссылка имеет атрибут href, который начинается с http://, ссылку нужно сделать зеленой». Из примера может показаться, что это довольно простой способ задавать вид внешних ссылок. Однако, будь осторожны: некоторые CMS (например WordPress) добавляют URL сайта в начало некоторых ссылок или ваш сайт может быть устроен так, что в начало всех ссылок добавляется переменная path. В этих случаях будет изменен вид всех ссылок, начинающихся на http:// — и внешних, и внутренних. Поэтому данный пример можно использовать только в определенных условиях.

Чтобы исправить указанный выше недостаток, попробуйте следующее:

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

a[href^="http://www.domain.com"], a[href^="http://domain.com"] {
        color: blue;
}

Однако такой код тоже не идеален, поскольку не распространяется на https://. Соответственно помните, что всё надо тестировать. Тем не менее, пример ясно показывает, как работает данный селектор, и вы можете использовать его где считаете уместным.

Еще одно важное примечание. Не стоит путать этот селектор с другим, широко известным как селектор атрибута “language”, который использует вертикальную линию (|). Такой селектор атрибута найдет совпадение только в том случает, если соответствующее условию значение стоит в начале значения и за ним следует дефис. Такое часто используется для поиска значений в атрибутах hreflang ссылок.

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

Данный селектор делает все наоборот. Можно находить и определять элементы по совпадению конца значения. Например:

a[href$=".pdf"] {
        background: url(../images/pdf.png) no-repeat center right;
        padding-right: 20px;
}

Селектор использует знак доллара ($). Теперь процесс поиска совпадений выглядит надежным. Мы знаем, что все якорные элементы, указывающие на PDF-документы, будут иметь расширение “.pdf”, стало быть, с помощью этого кода мы можем для таких ссылок добавить внутренний отступ справа и значок PDF к фону ссылки.

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

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

div[class*="post-"] p {
        color: green;
}

“Звездочка” (*) хорошо известна в компьютерной среде, как подстановочный знак, обозначающие любой символ, и ее легко запомнить.

Используемый мною пример напоминает о том, как WordPress присваивает несколько классов определенным элементам, чаще всего с помощью префиксов типа “post-”. Это может быть не очень практично, поскольку обычно существует другой первичный класс, при помощи которого определяется элемент. Но опять же, данный пример просто показывает возможности селектора, и какого рода значения могут находиться при помощи подстановочного знака.

Есть примеры использования?

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

Источник:  css-live.ru
Вы можете оставить комментарий, или обратную ссылку на Ваш сайт.

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

Похожие статьи