CSS селекторы атрибутов и их разновидности

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

Напомню, что мы с вами уже разбирали некоторые виды селекторов, такие как идентификаторы, классы (class) и селекторы тегов. Сегодня продолжим изучение этой части курса каскадных таблиц стилей, которая позволит разнообразить оформление страниц сайта.

CSS селекторы атрибутов и их разновидности

Для практического рассмотрения всех вариантов вы можете взять страницу любого сайта в сети и, используя встроенный инструмент для разработчика, имеющийся на сегодня во всех популярных браузерах (его можно активировать просто нажав клавишу F12 либо щелкнуть по веб-страничке правой кнопкой мыши и выбрать из появившегося контекстного меню пункт «Просмотреть код» (могут быть варианты «Исследовать элемент», «Исследовать код» и т.д., в зависимости от веб-обозревателя, которым пользуетесь), прямо в онлайн режиме производить тестовые изменения.

Прообразом такого средства является расширение Firebug для Firefox, о котором я подробно писал в свое время. Именно разработчики Мазилы были первопроходцами в его создании. В наше время данный плагин уже не функционирует, поскольку в самом Фаерфоксе уже присутствует подобный инструмент в базовой комплектации. Однако, ознакомиться с материалом будет небесполезно, так как вы сможете понять сам принцип его применения, который остался неизменным.

Простой селектор атрибута и со значением

Итак, для рассмотрения всех вариантов составим три разных абзаца, определяемым тегом p, и пропишем к каждому из них атрибут title (не путать с одноименным тегом) с разными значениями:

<p title="Wordpress обновления">Новая версия WordPress выйдет не позднее апреля.</p>
<p title="Wordpress-плагины">Плагин WordPress One Seo Pack приобрел дополнительные функции, с которыми можно ознакомиться на официальном сайте.</p>
<p title="Ошибки WordPress">Плагин WP Tuner не обновлялся уже более года, поэтому его дальнейшее использование нецелесообразно.</p>

После этого текст всех абзацев отобразится на вебстарнице следующим образом:

Как видите, текст всплывающей подсказки строго тождественен значению атрибута title (для каждого параграфа это значение свое). HTML каркас для наших экспериментов создан, теперь переходим непосредственно к тому, как изменить их вид с помощью свойств CSS.

Простой селектор атрибута устанавливает стиль для элемента, если задан специфический атрибут какому-нибудь тегу (для нашего примера это тег p и атрибут title), причем его значение в данном конкретном случае неважно. Синтаксис CSS будет выглядеть следующим образом:

Синтаксис записи простого CSS селектора атрибута

Название атрибута заключается в квадратные скобки и пробел между ним и именем селектора не допускается. Выше на схеме два варианта: с указанием наименованием селектора и без оного.

  • В первом случае стиль применяется ко всем тегам, которым соответствует заданный атрибут;
  • Во втором случае стилевые свойства будут применены только к определенным тегам.

Как вы понимаете, свойства для каждого элемента, в том числе тега абзаца p, задаются в специальном файле стилей (обычно это style.css). Для начала пропишем правило CSS для простого селектора атрибута следующим образом:

p[title] {color: green}

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

Как уже было сказано, значение title в данном случае неважно, так как не отмечено в стилевых свойствах. Далее применим селектор атрибута со значением и посмотрим, как изменится текст всех трех подопытных параграфов. Синтаксис CSS правила в этом случае будет таким:

Синтаксис написания правила CSS для селектора атрибута со значением

Для этого допишем к title значение (параметр):

p[title="Wordpress обновления"] {color: green}

Тут же первый из испытуемых абзацев окрасится в зеленый цвет, остальные останутся неизменными, т.е. сохранены CSS свойства стандартного параграфа для данного ресурса:

Ниже рассмотрим еще несколько вариантов использования селектора атрибута.

Селектор, содержащим указанный текст и одно из нескольких значений атрибута

Может случиться так, что стили надо применить к тегу с определенным атрибутом, в значении которого содержится некоторый текст, отдельное слово или даже часть слова. В этом случае синтаксис написания правила следующий:

Синтаксис написания правила CSS для селектора атрибута, значение которого содержит указанный текст

Оператор «*» означает, что если в значении атрибута находится определенное слово или его часть, причем совершенно неважно, в каком месте (в начале, середине или конце), то к тегу с этим атрибутом и будет применено данное правило стилей. Продолжим практические изыскания. Напомню содержания трех параграфов и значения title для каждого из них:

<p title="Wordpress обновления">Новая версия WordPress выйдет не позднее апреля.</p>
<p title="Wordpress-плагины">Плагин WordPress One Seo Pack приобрел дополнительные функции,
с которыми можно ознакомиться на официальном сайте.</p>
<p title="Ошибки WordPress">Плагин WP Tuner не обновлялся уже более года, поэтому его дальнейшее использование нецелесообразно.</p>

Составим в соответствии с представленным выше синтаксисом правило стилей:

p[title*="Word"] {color: green}

После редактирования можете наблюдать, что текст всех абзацев станет зеленым, поскольку в значении атрибута title каждого из них присутствует «Word» как часть слова «WordPress»:

Случается иногда так, что прописаны несколько значений атрибута, разделенных пробелом. Это относится совершенно к любым тегам, например, к контейнеру div, который может содержать несколько классов (class) с разными значениями, являющимися в данном случае атрибутами.

Однако, будем продолжать рассматривать пример с тегом p и атрибутом title, так как он самый наглядный. Кроме того, экспериментируя с одними и теми же объектами, можно быстрее уловить разницу при использовании различных вариаций селектора атрибутов.

Чтобы применить особый стиль в отношении одного из значений атрибута, разделенных пробелом, можно использовать оператор «~»; синтаксис написания будет следующий:

Синтаксис написания правила CSS для одного из значений атрибута

Применительно к тем же абзацам, которые рассматриваем в сегодняшней публикации, определим следующее стилевое правило, указав в значении атрибута слово «WordPress»:

p[title~="Wordpress"] {color: green}

Теперь текст первого и третьего параграфа приобретет зеленый оттенок, потому что только для этих абзацев в значении атрибута title встречается «WordPress», отделенное от остального текста пробелом. Текст второго параграфа остался таким же.

Но почему, ведь в составе параметра тайтл тоже есть это слово? Да потому, что оно в значении title для второго абзаца разделено не пробелом, а знаком дефиса «-».

Таким образом, мы с вами уяснили, что действия оператора «~» распространяются на одно из нескольких значений того или иного атрибута, которые отделены друг от друга пробелами.

Значение атрибута начинается с конкретного текста, заканчивается им или содержит дефис

Двигаемся дальше в рамках нашего теоретическо-практического занятия, посвященного CSS селекторам атрибута. Еще раз напомню, что мы рассматриваем пример с тремя абзацами, образованными с помощью тега p и атрибута title:

<p title="Wordpress обновления">Новая версия WordPress выйдет не позднее апреля.</p>
<p title="Wordpress-плагины">Плагин WordPress One Seo Pack приобрел дополнительные функции,
с которыми можно ознакомиться на официальном сайте.</p>
<p title="Ошибки WordPress">Плагин WP Tuner не обновлялся уже более года, поэтому его дальнейшее использование нецелесообразно.</p>

Теперь обратимся к изучению еще нескольких вариантов селектора атрибута, а именно: когда значение атрибута начинается с определенного текста, заканчивается определенным текстом и когда в значении атрибута присутствует дефис.

Все эти тонкости в использовании различных вариантов значений атрибутов позволяют создать действительно гибкую систему для оформления странниц web-сайта. Сейчас познакомимся с воздействием оператора «^», который указывает на то, что в составе параметра присутствует текст или слово, с которого начинается значение атрибута данного тега. Немного запутались? Сейчас все поймете. Прежде дам синтаксис написания стилевого правила, когда значение атрибута начинается с определенного текста:

Синтаксис написания правила CSS, когда значение атрибута начинается с определенного текста

Следующим шагом указываем стили опять же применительно к нашим подопытным абзацам:

p[title^="Wordpress"] {color: green}

На этот раз текст первого и второго абзацев приобрел зеленый оттенок, а текст третьего сохранил стилевое оформление обычного параграфа:

Это произошло потому, что значение атрибута title обоих первых параграфов начинается со слова «WordPress». В параметре третьего абзаца оно также присутствует, но не в начале. Приведу для закрепления еще пример, когда удобно использовать оператор «^».

На страницах блога я подробно писал о создании html гиперссылок, а также об абсолютных и относительных ссылках. Так вот, можно по-разному оформить внутренние и внешние линки ресурса, используя именно значок оператора «^».

Дело в том, что внутренние ссылки можно сделать относительными, то есть без использования имени протокола «http://» («https://»). В то время как внешние ссылки отличными от абсолютных быть не могут и всегда начинаются с указания протокола. Поэтому, создав такое правило:

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

Мы получим красный цвет внешних ссылок на сайте. Как вы, наверное знаете, гиперссылки создаются с помощью тега a, а href является атрибутом, который указывает на URL адрес. Поэтому линки, начинающиеся с «http://», приобретают в этом случае красную окраску.

Идем дальше. Можно также использовать селектор атрибута со значением, заканчивающимся определенным текстом. Для этого используется оператор «$». Тогда синтаксис будет таким:

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

Теперь прописываем CSS свойства для нашего случая:

p[title$="Wordpress"] {color: green}

После этого в зеленый цвет окрасится только третий абзац, потому что значение title для него заканчивается словом «WordPress»:

Еще один пример использования оператора «$». Если вы хотите разделить ссылки, которые ведут на ресурсы с доменом .ru от остальных.

a[href$=".ru"] {color: red}

В этом случае все ссылки, заканчивающиеся на «.ru», окрасятся красным.

Ну, и последний оператор, который делает комплекс свойств CSS более гибким, это «|». С его помощью можно применить селектор атрибута со значением, в котором есть дефис. Синтаксис:

Синтаксис написания правила CSS для селектора атрибута, в значении которого содержится дефис

Для нашего примера это будет выглядеть следующим образом:

p[title|="Wordpress"] {color: green;}

В данном случае текст второго абзаца позеленеет, остальные останутся в прежнем формате:

Это произошло по той простой причине, что именно в значении title второго абзаца есть дефис, которым отделено первое слово от остального текста.

Еще один пример, когда может использоваться оператор «|» — это классы, название которых состоит из нескольких частей, разделенных дефисом, например, «class=»left-line»».

Как известно, классы присваиваются преимущественно контейнерам, образованным основным тегом блочной верстки div. Но в данном случае class будет служить его атрибутом. Поэтому можно записать правило CSS следующим образом:

div[class|="left"] {text-align: left; color: green; font-size: 75%}

Теперь эти свойства будут определять оформление контейнеров, наименовани класса которых первым содержит слово «left», отделенное дефисом от другой части названия.

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

Поделиться с друзьями
Игорь Горнов

Создатель и администратор сайта Goldbusinessnet.com. Участник нескольких успешных проектов и автор более 1000 статей о работе в интернете, создании сайтов, полезных программах и сервисах.

Работа в интернете
Добавить комментарий

Нажимая на кнопку "Отправить комментарий", я даю согласие на обработку персональных данных и принимаю политику конфиденциальности.