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

Здравствуйте, уважаемы читатели! В сегодняшней публикации мы продолжим изучение основ CSS и я предложу Вам описание различных вариаций селекторов атрибутов, причем теоретические выкладки можно будет подкреплять практическими действиями, используя встроенные инструменты всех популярных браузеров (тут - о понятии browser и сравнение лучших web-обозревателей), например, расширение Firebug для Firefox, о котором я подробно писал.

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

Было сделано еще немало полезного, обо всех предпринятых мной шагах обязательно подробно расскажу в ближайших публикациях. Ну, и в-третьих, получил позитивный заряд, тесно пообщавшись с друзьями и родными во время рождественских и новогодних праздников. Кстати, пользуясь случаем, хочу пожелать всем читателям блога здоровья, успехов, любви и семейного благополучия в Новом Году! Такие пожелания никогда не бывают запоздалыми, если идут от чистого сердца.

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

Перед тем, как начать изложение материала, еще раз хочу напомнить, что темы и объем статей очень тщательно мной проработаны и ориентированы прежде всего на начинающих. Но не исключаю, что и опытные вебмастера найдут для себя толику чего-то полезного. Поэтому те, кто в дальнейшем хочет сэкономить средства и время при редактировании или даже создании с “нуля” своего вебсайта, ни в коем случае не должны пренебрегать изучением стилей CSS, тем более, что я пытаюсь излагать материалы ясно, доступно, и, вместе с тем, компактно.

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

На самом деле, все просто. Современное развитие web-технологий позволяет делать подобные вещи легко и просто. Я имею ввиду использование такого инструмента как, например, Firebug для Firefox, о котором я упомянул в начале поста. Однако, я написал уже о нем достаточно подробно, поэтому в этой статье буду использовать аналогичный инструмент для другого популярного браузера Google Chrome (тут о нем подробнее).

Этот инструмент уже встроен изначально в последних версиях Хрома. Кстати, подобные встроенные расширения имеют все наиболее популярные браузеры, включая IE и Opera (как скачать, установить, обновить, настроить). Итак, для начала открываем любую страницу любого ресурса (можно своего сайта) в Google Chrome (желательно, чтобы это была последняя версия).

Выделяем какой-нибудь элемент на вебстранице (для примера я выделю один из абзацев сегодняшней статьи) и кликаем правой кнопкой мыши. Из контекстного меню выбираем “Просмотр кода элемента” (альтернативой является простое нажатие клавиши F12 на клавиатуре). В нижней части появится окно, подобное окну Firebug, в левой части которого будет находиться html код выделенного элемента со всеми тегами, справа - стили CSS.

По моему мнению, самым наглядным примером для проработки селекторов атрибута с разными вариациями является тег абзаца p и атрибут title (не путать с тегом title), который определяет содержание всплывающей подсказки. Если вы читали статью об основах блочной верстки, то представляете себе роль тега div, который является основным строительным материалом современных сайтов.

Если желаете, можете поочередно открыть контейнеры div, нажимая на расположенный слева черный треугольный значок, пока не доберетесь до тегов p, содержание которых отображается на странице в виде текста, разделенного на параграфы (или абзацы, что одно и то же).

Далее, подведите курсор к началу контейнера div, содержащего теги p и нажмите правую кнопку мыши. Из появившегося контекстного меню необходимо выбрать “Edit as HTML”.

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

В этом окне для редактирования составим три абзаца, применив к тегу p атрибут title, который вызывает всплывающую подсказку. Например, так:

1. Абзац (или параграф, что одно и то же, напоминаю), описывающий сроки обновления WordPress:

<p title="Wordpress обновления">Новая версия WordPress выйдет не позднее апреля 2013 года.</p>

2. Параграф, дающий информацию о расширениях (плагинах):

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

3. Параграф о продолжительном отсутствии обновлений плагинов:

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

Итак, мы внесли все три абзаца в поле для редактирования в окне инструмента разработчика. Для того, чтобы утвердить сделанные изменения, просто кликните левой кнопкой мышки и текст всех трех абзацев появится на вебстранице именно в том месте, где должен быть.

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

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

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

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

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

Как вы понимаете, свойства CSS для каждого элемента, в том числе тега абзаца p, задаются в документе style.css. Еще раз напоминаю, что для практического закрепления теории мы используем великолепный инструмент html и CSS редактирования, где в левой части окна добавили три абзаца, каждый со своим значением title.

Изменения в коды html и CSS мы вносим “на лету” на любой странице абсолютно любого ресурса (можете использовать одну из страниц моего блога, если так будет удобнее). В этом и преимущество подобных инструментов, которыми обладают все популярные браузеры, что даже человек, не имеющий своего сайта, может поэкспериментировать и получить необходимую практику.

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

После нажатия на ссылку получаем полную версию файла style.css, который можно сразу же редактировать онлайн. То есть удалять, изменять или вносить новые стили.

Пропишем правило CSS для простого селектора атрибута следующим образом:

p[title] {
         color: green;
         }

Внесем его прямо в конец файла style.css в окне редактирования инструмента разработчика:

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

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

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

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

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

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

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

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

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

<p title="Wordpress обновления">Новая версия WordPress выйдет не позднее апреля 2013 года.</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, так как он самый наглядный, особенно для начинающих. Кроме того, экспериментируя с одними и теми же объектами, можно более наглядно увидеть разницу при использовании различных вариаций селектора атрибутов.

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

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

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

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

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

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

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

Двигаемся дальше в рамках нашего теоретическо-практического занятия, посвященного CSS селекторам атрибута. Поскольку пост получается достаточно объемным, еще раз напомню, что мы рассматриваем пример с тремя абзацами, образованными с помощью тега p и атрибута title (всплывающая подсказка) прямо в поле инструмента для онлайн редактирования браузера Google Chrome. Этот инструмент вызывается, в частности, простым нажатием клавиши F12.

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

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

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

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

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

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

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

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

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

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

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

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

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

После этого в зеленый цвет окрасится только третий абзац, потому что значение title для него заканчивается словом «Wordpress». Вы немедленно можете в этом убедиться, прописав это правило вместо предыдущего в левой части окна редактирования CSS кода инструмента, который сегодня мы все время задействуем. Еще один пример использования оператора «$». Если вы хотите разделить ссылки, которые ведут на ресурсы с доменом .ru от остальных.

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

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

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

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

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

Это произошло потому, что именно в значении title второго абзаца есть дефис, которым отделено первое слово от остального текста. Еще один пример, когда может использоваться оператор «|» - это классы, название которых состоит из нескольких частей, разделенных дефисом, как на ниже следующем скриншоте:

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

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

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

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

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

Кроме того, современный вебмастер все-таки должен обладать хотя бы базовыми знаниями CSS, поскольку это в значительной степени поможет сэкономить в дальнейшем массу времени и сил. Это проверено на собственном опыте, поэтому и утверждаю это с такой уверенностью. Не забывайте подписываться на получение новых материалов блога, пока.

Еще статьи по данной теме:
Самые интересные публикации из рубрики: Учебник CSS

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Чтобы ввести любой код, вставьте его между [php] и [/php]. Ссылка (URL), помещенная в текст комментария, не будет активной. C целью ее выделения и более удобного копирования можно заключить ее между тегами <pre> и </pre>.