Не смотря на свою гибкость и разнообразие селекторы атрибутов в CSS применяются довольно редко. Хотя их применение даёт большие возможности для веб-разработчиков. Они позволяют изменить свойства элемента с заданным атрибутом и более того с определенным значением. В зависимости от результата, который хотелось бы получить, для селекторов атрибутов применяют разный синтаксис.
Простой селектор атрибута
Применяется для установления стиля атрибута, если значение атрибута не играет никакой роли. И имеет следующий синтаксис:
[атрибут] { свойство1: значение; ... } селектор [атрибут] { свойство1: значение; ... }
В качестве примера попробуйте например прописать в таблице стилей вот такую вот строчку:
P { color: red; /* Цвет текста */ }
Цвет текста поменяется лишь в том случае, когда к тегу p будет применен атрибут выравнивания текста align
Атрибут со значением
Применяется тогда, когда задан атрибут с определенным значением. Синтаксис применения следующий:
[атрибут="значение"] { свойство1: значение; ... } селектор [атрибут="значение"] { свойство1: значение; ... }
На практике можно применить например следующее:
P { color: red; /* Цвет текста */ } p { color: navy; /* Цвет текста */ }
Значение атрибута начинается с определенного текста
Такой способ задания стиля можно применить например к ссылкам или другим элементам значения атрибутов которых, начинаются с определенных названий. Например:
Img { margin:15px auto; }
Синтаксис для такого способа задания стилей имеет следующий вид:
[атрибут^="значение"] { свойство1: значение; ... } селектор [атрибут^="значение"] { свойство1: значение; ... }
Значение атрибута оканчивается определенным текстом
Применяется довольно редко. Обычно этот способ задания стилей применяют при окончании названия каких-либо ссылок или разрешения файлов. Общий синтаксис такой:
[атрибут$="значение"] { свойство1: значение; ... } селектор [атрибут$="значение"] { свойство1: значение; ... }
Можете применить этот способ вот так:
Img {/* Если разрешение файла изображения заканчивается на.png */ margin:10px auto; } a { /* Если ссылка заканчивается на.com */ padding-right: 25px; }
Значение атрибута содержит указанный текст
Бывают случаи, когда требуется задать стили к определенным ссылкам которые имеют одинаковый текст в названии значения атрибутов. Синтаксис написания следующий:
[атрибут*="значение"] { свойство1: значение; ... } селектор [атрибут*="значение"] { свойство1: значение; ... }
В качестве примера я применил стиль для изменения вида ссылок где встречается название «sdcvoy»:
Самостоятельное создание сайта | Язык HTML | Известный поисковик
В результате у меня получилось следующее:
Одно из нескольких значений атрибута
Часто в задании атрибутов встречается перечисление нескольких значений через пробел. Как вы уже наверное догадались, можно задать свойства стилей для одного значения. Синтаксис такого способа следующий:
[атрибут~="значение"] { свойство1: значение; ... } селектор [атрибут~="значение"] { свойство1: значение; ... }
Предлагаю посмотреть небольшой пример:
Заголовок красного цвета
В результате должно получиться следующее:
Дефис в значении атрибута
Очень часто название значений атрибутов состоит из нескольких слов разделенных дефисом. И бывает так что первое слово в названии повторяется. Так вот для таких атрибутов можно отдельно задать стили. Делается это очень просто. Например вот так:
Div a { color:green; /* Цвет ссылок */ padding: 15px; /* Поля */ }
Общий синтаксис применения такой:
[атрибут|="значение"] { свойство1: значение; ... } селектор [атрибут|="значение"] { свойство1: значение; ... }
Вы можете не запоминать применение селекторов атрибутов, так как я уже говорил раньше что их используют довольно редко, но они являются очень гибким инструментом в веб-разработке. А пока я предлагаю перейти к следующей теме.
Селекторы атрибутов - это селекторы, которые позволяют применить стили к любым HTML-элементам имеющим определенный атрибут или определенное значение атрибута. Существует много способов их применения, но, несмотря на такую гибкость, на практике селекторы атрибутов довольно редко используются, так как есть более удобные селекторы. Хотя, с другой стороны, иногда они очень помогают.
Да, и как обычно говорю вам - не вздумайте все, что написано ниже, заучивать наизусть, если с головой дружите. :) Из этого урока вам надо запомнить одно - то, что написано в первом параграфе. В остальном надо просто разобраться и понять. Итак.
Синтаксис селекторов атрибутов
Для применения стилей к элементам с определенным атрибутом, необходимо в квадратных скобках, , указать данный атрибут.
[атрибут] { свойство: значение; ... }
Чтобы стили применились к элементам имеющим не просто определенный атрибут, а атрибут с конкретным значением - надо после атрибута написать знак равно (=) и это значение, которое можно взять в кавычки.
[атрибут="значение"] { свойство: значение; ... }
Некоторые атрибуты могут иметь сразу несколько разделенных пробелом значений (например, атрибут rel тега или class , который мы рассмотрим чуть позже). Так вот, чтобы задать стили элементам, у которых одно из значений в атрибутах одинаковое, надо после атрибута поставить знаки ~= (приблизительно равно), а затем написать необходимое значение.
[атрибут~="значение"] { свойство: значение; ... }
Четвертый вариант предназначен для атрибутов, у которых значение может состоять из нескольких слов разделенных дефисом (допустим, то же class ). И он позволяет применить стили ко всем элементам, у которых первое слово в значении атрибутов - одинаковое. Например, class= "block-left" и class= "block-right" . Здесь одинаковая часть - block , поэтому ее и можно использовать в качестве значения.
[атрибут|="значение"] { свойство: значение; ... }
Пятый способ подключает стили к элементам, у которых значения атрибутов начинаются с одинакового текста. Например, src= "images/bird.png" и src= "images/cat.jpg" . Здесь одинаковая часть images/ или images или image и т.д. Именно эта одинаковая часть и записывается в качестве значения.
[атрибут^="значение"] { свойство: значение; ... }
Аналогичен пятому, но здесь выборка идет по части текста, которым наоборот заканчиваются значения атрибутов. Допустим, src= "image/bird.png" и src= "picture/dog.png" . Понятно, что здесь одинаковая часть .png .
[атрибут$="значение"] { свойство: значение; ... }
Если необходимо выделить элементы, у которых значения атрибутов имеют одинаковую часть текста, причем неважно в каком месте значения, то используется данный способ. Например, href= "http://сайт/css/" и href= "http://www.сайт/html/" . Здесь одинаковая часть "сайт" . Таким образом, допустим, можно выделить все ссылки ведущие на определенный сайт.
[атрибут*="значение"] { свойство: значение; ... }
К сожалению, Internet Explorer 6.0 вообще не понимает селекторы атрибутов.
Пример использования селекторов атрибутов в CSS
Результат в браузере
Псевдо-элементы позволяют стилизовать определенные части документа. Например псевдо-элемент::first-line предназначен для добавления стилей только к первой строке указанного элемента. В спецификации CSS3 псевдо-элементы начинаются с двойного двоеточия - ":: ":
P::first-letter { font-size: 120%; }
Двойное двоеточие было введено в CSS3 для визуального различия псевдо-классов и псевдо-элементов. Однако, псевдо-элементы, которые были добавлены еще в CSS2 (такие как: first-letter, first-line, before и after), могут быть записаны и с одним двоеточием, такой синтаксис использовался до появления спецификации CSS3 и поддерживается всеми браузерами. Синтаксис с двойным двоеточием поддерживается только в новых версиях браузеров и в обязательном порядке должен применяться только к псевдо-элементу::selection, который был добавлен в CSS3.
Примечание: каждый селектор может содержать только один псевдо-элемент, который должен быть определен в самом конце селектора: #header .menu span::first-letter { color: green; }
Псевдо-элемент::first-letter
Псевдо-элемент::first-letter позволяет применить стиль к первой букве в тексте родительского элемента. Например, для стилизации первой буквы в абзаце нам бы пришлось заключить ее в элемент и применить стиль к нему:
Наш текст
Попробовать »Или мы можем стилизовать первую букву в тексте с помощью псевдо-элемента::first-letter, в этом случае нам не придется добавлять лишний элемент в HTML-разметку:
Наш текст
Попробовать »Псевдо-элемент::first-line
Псевдо-элемент::first-line применяет стиль к первой строке текста в элементе:
P { width: 200px; } p::first-line { color: blue; } Попробовать »
Особенность псевдо-элемента::first-line состоит в том, что он будет стилизовать только первую строку, ширина которой будет зависеть от ширины элемента, то есть на более маленьких экранах или при уменьшении окна браузера будет меняться и ширина первой строки, но ее оформление будет оставаться неизменным.
Псевдо-элементы::before и::after
Для добавления генерируемого содержимого в документ используются псевдо-элементы::before и::after. С их помощью можно разместить генерируемое содержимое до и после содержимого в указанном элементе. Для определения содержимого, которое будет добавлено, используется CSS свойство content.
Допустим, у нас есть достаточно большой по объему текст, он содержит ссылки, но по оформлению они практически никак не отличаются от остального текста. И нам нужно перед каждой ссылкой поместить небольшую иконку, которая будет указывать пользователям, что это ссылка:
A { text-decoration: none; color: black; } a::before { content: url("link.png"); } Попробовать »
Селекторы атрибутов
Селекторы атрибутов поддерживаются всеми современными браузерами (исключение составляет IE6, хотя его уже нельзя отнести к современным браузерам, стоит учитывать тот факт, что некоторые пользователи все еще его используют. Поэтому, если вам необходимо написать код, одинаково хорошо работающий во всех браузерах, включая IE6, то советуем вам воздержаться от использования селекторов атрибутов).
Селекторы атрибутов позволяют выбрать определенный элемент без использования идентификатора или класса. Для обращения к элементу, нужно всего лишь знать, содержит ли нужный элемент определенный атрибут:
Img { border: 1px solid red; }
В примере, приведенном выше, правило будет применяться ко всем элементам , имеющим атрибут alt. Но помимо простой выборки элементов по атрибутам, селекторы атрибутов позволяют выбирать элементы исходя из значения атрибута:
- элемент[атрибут^="значение"] ^= означает "начинается с...".
- элемент[атрибут$="значение"] - селектор атрибута с совпадением по подстроке. Оператор $= означает "заканчивается на...".
- элемент[атрибут*="значение"] - селектор атрибута с совпадением по подстроке. Оператор *= означает "содержит подстроку...".
В качестве примера приведем оформление ссылок, ссылающихся на внешний ресурс, электронный адрес и файл с расширением.pdf:
A { padding-left: 20px; background-image: url("img1.png"); background-repeat: no-repeat; } a { padding-left: 20px; background-image: url("img2.png"); background-repeat: no-repeat; } a { padding-left: 20px; background-image: url("img3.png"); background-repeat: no-repeat; } Попробовать »
В подобных ситуациях селекторы атрибутов полезно использовать для внесения привлекательных дополнений в дизайн ваших веб-страниц.
Влад Мержевич
Многие теги различаются по своему действию в зависимости от того, какие в них используются атрибуты. Например, тег может создавать кнопку, текстовое поле и другие элементы формы всего лишь за счёт изменения значения атрибута type . При этом добавление правил стиля к селектору INPUT применит стиль одновременно ко всем созданным с помощью этого тега элементам. Чтобы гибко управлять стилем подобных элементов, в CSS введены селекторы атрибутов. Они позволяют установить стиль по присутствию определённого атрибута тега или его значения.
Рассмотрим несколько типичных вариантов применения таких селекторов.
Простой селектор атрибута
Устанавливает стиль для элемента, если задан специфичный атрибут тега. Его значение в данном случае не важно. Синтаксис применения такого селектора следующий.
[атрибут] { Описание правил стиля }
Селектор[атрибут] { Описание правил стиля }
Стиль применяется к тем тегам, внутри которых добавлен указанный атрибут. Пробел между именем селектора и квадратными скобками не допускается.
В примере 13.1 показано изменение стиля тега
,
в том случае, если к нему добавлен атрибут title
.
Пример 13.1. Вид элемента в зависимости от его атрибута
HTML5 CSS 2.1 IE Cr Op Sa Fx
Продолжая известный закон Мерфи, который гласит: Если неприятность
может случиться, то она обязательно случится
, можем ввести свое наблюдение:
После того, как веб-страница
будет корректно отображаться в одном браузере, выяснится,
что она неправильно показывается в другом
.
Результат примера показан на рис. 13.1.
Рис. 13.1. Изменение стиля элемента в зависимости от применения атрибута title
В данном примере меняется цвет текста внутри контейнера
,
когда к нему добавляется title
. Обратите
внимание, что для селектора Q
нет нужды повторять стилевые
свойства, поскольку они наследуются от селектора Q
.
Атрибут со значением
Устанавливает стиль для элемента в том случае, если задано определённое значение специфичного атрибута. Синтаксис применения следующий.
[атрибут="значение"] { Описание правил стиля }
Селектор[атрибут="значение"] { Описание правил стиля }
В первом случае стиль применяется ко всем тегам, которые содержат указанное значение. А во втором — только к определённым селекторам.
В примере 13.2 показано изменение стиля ссылки в том случае, если тег содержит атрибут target со значением _blank . При этом ссылка будет открываться в новом окне и чтобы показать это, с помощью стилей добавляем небольшой рисунок перед текстом ссылки.
Пример 13.2. Стиль для открытия ссылок в новом окне
HTML5 CSS 2.1 IE Cr Op Sa Fx
Результат примера показан ниже (рис. 13.2).
Рис. 13.2. Изменение стиля элемента в зависимости от значения target
В данном примере рисунок к ссылке добавляется с помощью свойства background . В его функции входит создание повторяющейся фоновой картинки, но повторение фона можно отменить через значение no-repeat , что в итоге даст единственное изображение.
Значение атрибута начинается с определённого текста
Устанавливает стиль для элемента в том случае, если значение атрибута тега начинается с указанного текста. Синтаксис применения следующий.
[атрибут^="значение"] { Описание правил стиля }
Селектор[атрибут^="значение"] { Описание правил стиля }
В первом случае стиль применяется ко всем элементам, у которых значение атрибута начинаются с указанного текста. А во втором — только к определённым селекторам. Использование кавычек не обязательно, но только если значение содержит латинские буквы и без пробелов.
Предположим, что на сайте требуется разделить стиль обычных и внешних ссылок — ссылки, которые ведут на другие сайты. Чтобы не вводить в тег новый класс, воспользуемся селекторами атрибутов. Внешние ссылки характеризуются добавлением к адресу протокола, например, для доступа к гипертекстовым документам используется протокол HTTP. Поэтому внешние ссылки начинаются с ключевого слова http:// , его и добавляем к селектору A , как показано в примере 13.3.
HTML5 CSS 2.1 IE Cr Op Sa Fx
.</p>
<p><img src='https://i0.wp.com/htmlbook.ru/files/images/samcss/fig13-3.png' width=){kind=link}
Рис. 13.3. Изменение стиля для внешних ссылок
Значение атрибута оканчивается определённым текстом
Устанавливает стиль для элемента в том случае, если значение атрибута оканчивается указанным текстом. Синтаксис применения следующий.
[атрибут$="значение"] { Описание правил стиля }
Селектор[атрибут$="значение"] { Описание правил стиля }
В первом случае стиль применяется ко всем элементам у которых значение атрибута завершается заданным текстом. А во втором — только к определённым селекторам.
Таким способом можно автоматически разделять стиль для ссылок на сайты домена ru и для ссылок на сайты других доменов вроде com, как показано в примере 13.4.
Пример 13.4. Стиль для разных доменов
HTML5 CSS 2.1 IE Cr Op Sa Fx
Yandex.Com | Yandex.Ru
В данном примере содержатся две ссылки, ведущие на разные домены — com и ru. При этом к каждой такой ссылке с помощью стилей добавляется своя фоновая картинка (рис. 13.4). Стилевые свойства будут применяться только для тех ссылок, атрибут href которых оканчивается на «.ru» или «.com». Заметьте, что добавив к имени домена слэш (http://www.yandex.ru/) или адрес страницы (http://www.yandex.ru/fun.html), мы изменим тем самым окончание и стиль применяться уже не будет. В этом случае лучше воспользоваться селектором, у которого заданный текст встречается в любом месте значения атрибута.
Значение атрибута содержит указанный текст
Возможны варианты, когда стиль следует применить к тегу с определённым атрибутом, при этом частью его значения является некоторый текст. При этом точно не известно, в каком месте значения включен данный текст — в начале, середине или конце. В подобном случае следует использовать такой синтаксис.
[атрибут*="значение"] { Описание правил стиля }
Селектор[атрибут*="значение"] { Описание правил стиля }
В примере 13.5 показано изменение стиля ссылок, в атрибуте href которых встречается слово «htmlbook».
Пример 13.5. Стиль для разных сайтов
HTML5 CSS 2.1 IE Cr Op Sa Fx
Шаг за шагом | Графика для Веб
Результат данного примера показан на рис. 13.5.
Рис. 13.5. Изменение стиля для ссылок, в адресе которых встречается «htmlbook»
Одно из нескольких значений атрибута
Некоторые значения атрибутов могут перечисляться через пробел, например имена классов. Чтобы задать стиль при наличии в списке требуемого значения применяется следующий синтаксис.
[атрибут~="значение"] { Описание правил стиля }
Селектор[атрибут~="значение"] { Описание правил стиля }
Стиль применяется в том случае, если у атрибута имеется указанное значение или оно входит в список значений, разделяемых пробелом (пример 13.6).
Пример 13.6. Стиль в зависимости от имени класса
HTML5 CSS 2.1 IE Cr Op Sa 5 Fx
Заголовок
В данном примере зелёный цвет текста применяется к селектору H3 , если имя класса у слоя задано как block . Отметим, что аналогичный результат можно получить, если использовать конструкцию *= вместо ~= .
Дефис в значении атрибута
В именах идентификаторов и классов разрешено использовать символ дефиса (-), что позволяет создавать значащие значения атрибутов id и class . Для изменения стиля элементов, в значении которых применяется дефис, следует воспользоваться следующим синтаксисом.
[атрибут|="значение"] { Описание правил стиля }
Селектор[атрибут|="значение"] { Описание правил стиля }
Стиль применяется к элементам, у которых атрибут начинается с указанного значения или с фрагмента значения, после которого идёт дефис (пример 13.7).
Пример 13.7. Дефисы в значениях
HTML5 CSS 2.1 IE Cr Op Sa Fx
В данном примере имя класса задано как block-menu-therm , поэтому в стилях используется конструкция |="block" , поскольку значение начинается именно с этого слова и в значении встречаются дефисы.
Все перечисленные методы можно комбинировать между собой, определяя стиль для элементов, которые содержат два и более атрибута. В подобных случаях квадратные скобки идут подряд.
[атрибут1="значение1"][атрибут2="значение2"] { Описание правил стиля }
Селектор[атрибут1="значение1"][атрибут2="значение2"] { Описание правил стиля }
Вопросы для проверки
1. Необходимо задать цвет фона у текстового поля. Какой стиль для этой цели подойдет?
- INPUT { background: #acdacc; }
- INPUT { background: #acdacc; }
- INPUT { background: #acdacc; }
- INPUT { background: #acdacc; }
- INPUT { background: #acdacc; }
2. Какой стиль необходимо использовать, чтобы изменить цвет текста только у второго абзаца?
Первый абзац
Второй абзац
Третий абзац
- P { color: red; }
- P { color: red; }
- P { color: red; }
- P { color: red; }
- P { color: red; }
3. К какому элементу будет применяться следующий стиль?
{ background: #666; }
- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Ответы
1. INPUT { background: #acdacc; }
2. P { color: red; }
3.
Здравствуйте, уважаемы читатели! В сегодняшней публикации мы продолжим изучение основ CSS и я предложу Вам описание различных вариаций селекторов атрибутов , причем теоретические выкладки можно будет подкреплять практическими действиями, используя встроенные инструменты всех популярных браузеров ( - о понятии browser и сравнение лучших web-обозревателей), например, о котором я подробно писал.
Прежде всего, хочу извиниться перед вами, дорогие читатели, за долгое отсутствие, но на это есть свои причины. Во-первых, был занят сразу в нескольких проектах довольно продолжительное время, которые отняли кучу времени. Во-вторых, плодотворно потрудился над улучшением юзабилити ( о usability детально и подробно) блога, максимально оптимизировал изображения, улучшив их качество и одновременно значительно уменьшив их вес, что должно непременно сказаться на продвижении ресурса в дальнейшем самым позитивным образом, да в общем, уже сказывается.
Было сделано еще немало полезного, обо всех предпринятых мной шагах обязательно подробно расскажу в ближайших публикациях. Ну, и в-третьих, получил позитивный заряд, тесно пообщавшись с друзьями и родными во время рождественских и новогодних праздников. Кстати, пользуясь случаем, хочу пожелать всем читателям блога здоровья, успехов, любви и семейного благополучия в Новом Году! Такие пожелания никогда не бывают запоздалыми, если идут от чистого сердца.
А теперь перехожу потихоньку непосредственно к теме сегодняшней публикации. Напомню, что мы с вами уже рассматривали . Сегодня продолжим изучение этой важной части курса каскадных таблиц стилей (CSS) и познакомимся с селекторами атрибутов и их разнообразными вариациями .
Перед тем, как начать изложение материала, еще раз хочу напомнить, что темы и объем статей очень тщательно мной проработаны и ориентированы прежде всего на начинающих. Но не исключаю, что и опытные вебмастера найдут для себя толику чего-то полезного. Поэтому те, кто в дальнейшем хочет сэкономить средства и время при редактировании или даже создании с “нуля” своего вебсайта, ни в коем случае не должны пренебрегать изучением стилей CSS, тем более, что я пытаюсь излагать материалы ясно, доступно, и, вместе с тем, компактно.
Надеюсь, вы простили мне это небольшое отступление, оно было важным и совершенно к месту, я в этом уверен. Теперь возвращаюсь к нашим баранам, то бишь селекторам атрибутов, многочисленные вариации которых подробно представлю ниже. Однако, для начала нужно провести некоторые приготовления, поскольку урок будет объемным и, что самое важное, вы сразу после каждого пункта теории сможете проверить все на практике прямо по ходу статьи. Заинтриговал?
На самом деле, все просто. Современное развитие web-технологий позволяет делать подобные вещи легко и просто. Я имею ввиду использование такого инструмента как, например, Firebug для Firefox, о котором я упомянул в начале поста. Однако, я написал уже о нем достаточно подробно, поэтому в этой статье буду использовать аналогичный инструмент для другого популярного браузера Google Chrome ( о нем подробнее).
Этот инструмент уже встроен изначально в последних версиях Хрома. Кстати, подобные встроенные расширения имеют все наиболее популярные браузеры, включая и Opera (как ). Итак, для начала открываем любую страницу любого ресурса (можно своего сайта) в Google Chrome (желательно, чтобы это была последняя версия).
Выделяем какой-нибудь элемент на вебстранице (для примера я выделю один из абзацев сегодняшней статьи) и кликаем правой кнопкой мыши. Из контекстного меню выбираем “Просмотр кода элемента” (альтернативой является простое нажатие клавиши F12 на клавиатуре). В нижней части появится окно, подобное окну Firebug, в левой части которого будет находиться , справа - стили CSS.
По моему мнению, самым наглядным примером для проработки селекторов атрибута с разными вариациями является и атрибут title (не путать с тегом title), который определяет содержание всплывающей подсказки . Если вы читали , то представляете себе роль тега div , который является основным строительным материалом современных сайтов.
Если желаете, можете поочередно открыть контейнеры div, нажимая на расположенный слева черный треугольный значок, пока не доберетесь до тегов p , содержание которых отображается на странице в виде текста, разделенного на параграфы (или абзацы, что одно и то же).
Появится окруженное рамкой пространство, в пределах которого можно осуществлять редактирование, а именно, удалять, изменять или добавлять текст:
В этом окне для редактирования составим три абзаца, применив к тегу p атрибут title, который вызывает всплывающую подсказку. Например, так:
1. Абзац (или параграф, что одно и то же, напоминаю), описывающий сроки обновления WordPress:
2. Параграф, дающий информацию о расширениях (плагинах):
3. Параграф о продолжительном отсутствии обновлений плагинов:
Итак, мы внесли все три абзаца в поле для редактирования в окне инструмента разработчика. Для того, чтобы утвердить сделанные изменения, просто кликните левой кнопкой мышки и текст всех трех абзацев появится на вебстранице именно в том месте, где должен быть.
Как видите, текст всплывающей подсказки строго тождественен значению атрибута title (для каждого параграфа это значение свое). HTML каркас для наших экспериментов создан, теперь переходим непосредственно к тому, как изменить их вид с помощью свойств CSS.
Простой селектор атрибута и селектор атрибута со значением
Простой селектор атрибута устанавливает стиль для элемента, если задан специфический атрибут какому-нибудь тегу (для нашего примера это тег p и атрибут title ), причем значение атрибута в данном конкретном случае неважно. Синтаксис CSS будет выглядеть следующим образом:
Наименование атрибута заключается в квадратные скобки и пробел между именем селектора и атрибутом не допускается. Выше на схеме даны два варианта использования: с указанием имени селектора и без оного.
- В первом случае заданный стиль CSS применяется ко всем тегам, которым соответствует заданный атрибут;
- Во втором случае стиль будет применен только к определенным тегам.
Как вы понимаете, свойства CSS для каждого элемента, в том числе тега абзаца p, задаются в документе style.css. Еще раз напоминаю, что для практического закрепления теории мы используем великолепный инструмент html и CSS редактирования, где в левой части окна добавили три абзаца, каждый со своим значением title.
Изменения в коды html и CSS мы вносим “на лету” на любой странице абсолютно любого ресурса (можете использовать одну из страниц моего блога, если так будет удобнее). В этом и преимущество подобных инструментов, которыми обладают все популярные браузеры, что даже человек, не имеющий своего сайта, может поэкспериментировать и получить необходимую практику.
Итак, после добавления абзацев их текст должен отобразиться на вебстранице (только не перезагружайте страницу во время практического занятия, иначе результаты сделанных вами изменений исчезнут). Далее необходимо прописать CSS правило для простого селектора. Для этого в правой части вебмастерского инструмента кликаем по ссылке, которая ведет к документу со стилями CSS (например, файл style.css):
Пропишем правило CSS для простого селектора атрибута следующим образом:
P { color: green; }
Внесем его прямо в конец файла style.css в окне редактирования инструмента разработчика:
После такого редактирования текст всех абзацев примет зеленую окраску, поскольку для каждого из них указан атрибут title, вызывающий всплывающую подсказку.
как уже было сказано, значение title в данном случае неважно, поскольку не отмечено в правиле CSS. Далее. Применим теперь селектор атрибута со значением и посмотрим, как изменится текст всех трех подопытных параграфов. Синтаксис написания CSS правила в этом случае будет таким:
Для этого допишем к title значение:
P { color: green; }
Тут же первый из испытуемых абзацев окрасится в зеленый цвет, остальные останутся неизменными, т.е. сохранены CSS свойства стандартного параграфа для данного ресурса:
Ниже рассмотрим еще несколько вариантов использования селектора атрибута.
Селектор атрибута со значением, содержащим указанный текст и одно из нескольких значений атрибута
Может случиться так, что стили CSS надо применить к тегу с определенным атрибутом, в значении которого содержится некоторый текст, отдельное слово или даже часть слова. В этом случае синтаксис написания CSS правила будет следующим:
Оператор «*» означает, что если в значении атрибута находится определенное слово или его часть, причем совершенно неважно, в каком месте (в начале, середине или конце), то к тегу с этим атрибутом и будет применено данное правило стилей. Продолжим практические изыскания. Напомню содержания трех параграфов и значения title для каждого из них:
Новая версия WordPress выйдет не позднее апреля 2013 года.
Плагин WordPress One Seo Pack приобрел дополнительные функции, с которыми можно ознакомиться на официальном сайте.
Плагин WP Tuner не обновлялся уже более года, поэтому его дальнейшее использование нецелесообразно.
Составим в соответствии с представленным выше синтаксисом правило стилей (можно заменить на него ранее прописанное там же, в левой части окна используемого нами инструмента:
P { color: green; }
Сразу после редактирования можете наблюдать, что текст всех абзацев станет зеленым, поскольку в значении атрибута title каждого из них присутствует «Word» как часть слова «Wordpress».
Случается иногда так, что прописаны несколько значений атрибута, разделенных пробелом. Это относится совершенно к любым тегам, например, к контейнеру div , который может содержать несколько классов (class) с разными значениями, являющимися в данном случае атрибутами.
Но мы будем продолжать рассматривать пример с тегом p и атрибутом title, так как он самый наглядный, особенно для начинающих. Кроме того, экспериментируя с одними и теми же объектами, можно более наглядно увидеть разницу при использовании различных вариаций селектора атрибутов .
Чтобы применить особый стиль в отношении одного из значений атрибута, разделенных пробелом , можно использовать оператор «~»; синтаксис написания будет следующий:
Применительно к тем же абзацам, которые рассматриваем в сегодняшней публикации, определим следующее стилевое правило, указав в значении атрибута слово «Wordpress»:
P { color: green; }
Теперь текст первого и третьего параграфа окрасится в зеленый цвет, потому что только для этих абзацев в значении атрибута title встречается слово «Wordpress», отделенное от остального текста пробелом. Текст второго параграфа остался таким же. Почему, ведь в значении title тоже есть WordPress? Да потому что это слово в значении title для второго абзаца разделено не пробелом, а знаком дефиса «-».
Итак, мы уяснили, что действия оператора «~» распространяются на фрагмент текста, разделенный пробелом. То есть, на одно из нескольких значений того или иного атрибута, которые отделены друг от друга пробелами. В нашем случае при использовании атрибута title значения, отделенные пробелами, и есть отдельные слова в значении title.
Фу-у-у, аж в пот бросило от усердия, но зато, похоже, разжевал все до мельчайших частиц, чтобы начинающим было понятно. Идем дальше и разберем еще несколько случаев применения селекторов атрибута. Наберитесь терпения, осталось немного, хотя по моим ощущениям, все должно быть интересно, когда вы можете на практике проверять постулаты теории.
Селекторы CSS: значение атрибута начинается с определенного текста, заканчивается определенным текстом и дефис в значении атрибута
Двигаемся дальше в рамках нашего теоретическо-практического занятия, посвященного CSS селекторам атрибута . Поскольку пост получается достаточно объемным, еще раз напомню, что мы рассматриваем пример с тремя абзацами, образованными с помощью тега p и атрибута title (всплывающая подсказка) прямо в поле инструмента для онлайн редактирования браузера Google Chrome. Этот инструмент вызывается, в частности, простым нажатием клавиши F12.
Новая версия WordPress выйдет не позднее апреля 2013 года.
Плагин WordPress One Seo Pack приобрел дополнительные функции, с которыми можно ознакомиться на официальном сайте.
Плагин WP Tuner не обновлялся уже более года, поэтому его дальнейшее использование нецелесообразно.
Теперь обратимся к изучению еще нескольких вариантов селектора атрибута, а именно: когда значение атрибута начинается с определенного текста, заканчивается определенным текстом и когда в значении атрибута присутствует дефис .
Все эти тонкости в использовании различных вариантов значений атрибутов позволяют создать действительно гибкую систему для оформления странниц web-сайта. Сейчас взглянем на воздействие оператора «^», который указывает на то, что в значении атрибута присутствует текст или слово, с которого начинается значение атрибута данного тега. Немного запутались? Сейчас все поймете. Прежде дам синтаксис написания стилевого правила, когда значение атрибута начинается с определенного текста:
Следующим шагом пишем новое правило CSS опять же применительно к нашим подопытным абзацам:
P { color: green; }
Опять же в режиме онлайн при использовании инструмента для редактирования html и CSS кода видим, что на этот раз текст первого и второго абзацев приобрел зеленый оттенок, а текст третьего сохранил стилевое оформление обычного параграфа:
Это произошло потому, что значение атрибута title обоих первых параграфов начинается со слова «Wordpress». В значении title третьего параграфа это слово также присутствует, но не в начале. Приведу для закрепления еще пример, когда удобно использовать оператор «^».