Селектор по значению атрибута. CSS: Псевдо-элементы и селекторы атрибутов Css обращение к атрибуту

Пример 13.2. Стиль для открытия ссылок в новом окне

HTML5 CSS 2.1 IE Cr Op Sa Fx

Результат примера показан ниже (рис. 13.2).

Рис. 13.2. Изменение стиля элемента в зависимости от значения target

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

Значение атрибута начинается с определённого текста

Устанавливает стиль для элемента в том случае, если значение атрибута тега начинается с указанного текста. Синтаксис применения следующий.

[атрибут^="значение"] { Описание правил стиля }
Селектор[атрибут^="значение"] { Описание правил стиля }

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

HTML5 CSS 2.1 IE Cr Op Sa Fx

Рис. 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. Необходимо задать цвет фона у текстового поля. Какой стиль для этой цели подойдет?

1. INPUT { background: #acdacc; }
2. INPUT { background: #acdacc; }
3. INPUT { background: #acdacc; }
4. INPUT { background: #acdacc; }
5. INPUT { background: #acdacc; }

2. Какой стиль необходимо использовать, чтобы изменить цвет текста только у второго абзаца?

Первый абзац

Второй абзац

Третий абзац

1. P { color: red; }
2. P { color: red; }
3. P { color: red; }
4. P { color: red; }
5. P { color: red; }

3. К какому элементу будет применяться следующий стиль?

{ background: #666; }

Lorem ipsum dolor sit amet

1. Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

2. Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Ответы

1. INPUT { background: #acdacc; }

2. P { color: red; }

3.

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

Селекторы по атрибутам тега используются не сами по себе, а только в совокупности со стилями переопределения тега или комбинированными стилями. Их записывают сразу после основного селектора без всяких пробелов и берут в квадратные скобки.

Селектор вида

<основной селектор>[<имя атрибута тега>] { <стиль> }

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

Пример:

TD { background-color: grey }

Этот стиль будет привязан к ячейкам таблицы, теги которых имеют атрибут ROWSPAN, т. е. к ячейкам, объединенным по горизонтали.

Селектор вида

<основной селектор>[<имя атрибута тега>=<значение>] { <стиль> }

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

Пример:

TD { background-color: grey }

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

Селекторы вида

<основной селектор>[<имя атрибута тега>~=
<список значений, разделенных пробелами>] { <стиль> }

<основной селектор>[<имя атрибута тега>|=
<список значений, разделенных запятыми>] { <стиль> }

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

Пример:

TD { background-color: grey }
TD { border: thin dotted black }

Эти стили будут привязаны к ячейкам таблицы, теги которых имеют атрибут ROWSPAN со значениями 2 и 3, т. е. к двойным и тройным ячейкам, объединенным по горизонтали.

Селектор вида

<основной селектор>[<имя атрибута тега>^=<подстрока>] { <стиль> }

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

Пример:

IMG { margin: 5px }

Этот стиль будет привязан к графическим изображениям, теги которых имеют атрибут SRC со значением, начинающимся с подстроки "http://www.pictures.ru", т. е. к изображениям, взятым с Web-сайта http://www.pictures.ru.

Селектор вида

<основной селектор>[<имя атрибута тега>$=<подстрока>] { <стиль> }

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

Пример:

IMG { margin: 10px }

Данный стиль будет привязан к графическим изображениям, теги которых имеют атрибут SRC со значением, заканчивающимся подстрокой "gif", т. е. к изображениям формата GIF.

Селектор вида

<основной селектор>[<имя атрибута тега>*=<подстрока>] { <стиль> }

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

Пример:

IMG { margin: 10px }

Этот стиль будет привязан к графическим изображениям, теги которых имеют атрибут SRC со значением, включающим подстроку "/picts/", т. е. к изображениям, взятым из папки picts Web-сайта, откуда они загружены.

Псевдоэлементы

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

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

<основной селектор><псевдоэлемент> { <стиль> }

Псевдоэлемент::first-letter привязывает стиль к первой букве текста в элементе Web-страницы, если ей не предшествует встроенный элемент, не являющийся текстом, например, изображение.

Пример:

P::first-letter { font-size: larger }

Этот стиль будет привязан к первой букве абзаца.

Псевдоэлемент ::first-line привязывает стиль к первой строке текста в элементе Web-страницы:

P::first-line { text-transform: uppercase }

Данный стиль будет привязан к первой строке абзаца.

Порой бывает необходимо, обратиться к какому-либо элементу страницы, у которого не прописан class или ID, не имея возможности добавить class или ID в html. CSS Обратиться к любому элементу по атрибутам – вот выход из ситуации.

Часто такие ситуации складываются, когда html код генерируется внешним подключаем script, и не может быть изменен вами. Но при этом его необходимо стилизовать, или изменить вид на CSS.

Итак, есть такая штука, как селекторы по атрибутам html. С этой помощью можно на CSS обратиться к любому элементу по атрибутам. Атрибуты – это те самые атрибуты тэгов html, которые src, href, data-*, title, name, rel, alt и др.

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

Рассмотрим примеры: CSS Обратиться к любому элементу по атрибутам

Например, если у нас есть пиксельная иконка, которую генерирует код PayPal, и на мобильной версии её нужно скрыть (потому, что сильно мешает). Тогда достаточно просто можно это сделать, на чистом CSS:

Или, например, нужно скрыть все элементы с title, который начинается на «Отправлено «. Так и сделаем:

Всего есть несколько таких селекторов:

• – все элементы, у которых есть такой атрибут
• – все элементы, у которых атрибут точно = значению
• – все элементы, у которых атрибут содержит значение (должно быть целое слово)
• – все элементы, у которых атрибут начинается значением (должно быть целое слово)
• – все элементы, у которых атрибут начинается значением (может быть не целое слово
• – все элементы, у которых атрибут заканчивается значением (может быть не целое слово)
• – все элементы, у которых атрибут содержит значение (может быть набор символов, а не целое слово)

Селекторы CSS являются значимым ингредиентом при разработке веб сайта. Они привязывают код CSS к разметке HTML. Сколько различных шаблонов селекторов вы регулярно используете?

Скорее всего, немного. Обычно список ограничивается простыми селекторами элементов HTML, классов и идентификаторов. Но возможных селекторов значительно больше.

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

В данной серии уроков мы рассмотрим следующие типы селекторов:

• Селекторы атрибутов — используем атрибуты HTML для выбора элементов.
• Комбинаторы — комбинирование селекторов для более точного указания элементов.
• Псевдо классы — элементы, которые мы можем использовать при определенных условиях.

Комбинаторы и псевдо классы будут рассмотрены в последующих уроках серии.

Для начала взглянем на простые селекторы.

Примечание: в скобках указана версия CSS, в которой появился селектор.

Простые селекторы

Простые селекторы включают селектор типа, универсальный селектор, селектор атрибута, селектор класса, селектор идентификатора и псевдо класс (псевдо класс будет рассмотрен в следующем уроке

Селектор типа (1) E (соответствует любому элементу типа E ) — Мы можем использовать любой элемент HTML в селекторе.

Универсальный селектор (2) * (соответствует любому элементу) — Если есть стиль, который нужно использовать для всех элементов на странице, то используем данный селектор.

Селектор класса (1) .class (соответствует элементу с классом class) — любой набор стилей, который можно использовать для любых элементов, обладающих определенным классом.

Селектор идентификатора (1) #myid (соответствует элементу с идентификатором myid) — любой набор стилей, который используется только для одного элемента с определенным идентификатором.

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

Селекторы атрибутов

Селекторы атрибутов были введены в CSS2 и расширены в CSS3.

E (2) — соответствует элементу E с атрибутом “foo”.

E (2) — соответствует элементу E, атрибут которого “foo” имеет значение “bar”.

A { color: green }

E (2) — соответствует элементу E, который имеет атрибут “foo” со значением в виде списка, разделенного пробелом, и одним значением соответствующим “bar".

A {color: green}

E (3) — соответствует элементу E, который имеет атрибут “foo” со значением, начинающимся со строки “bar”.

A {color: green}

E (3) — соответствует элементу E, который имеет атрибут “foo” со значением, заканчивающимся строкой “bar".

A {color: green}

Вторая ссылка будет иметь зеленый цвет, так как значение атрибута href заканчивается строкой "php" . Данный селектор может быть отличным средством для выделения ссылок с определёнными типами файлов.

E (3) — соответствует элементу E, который имеет атрибут “foo” со значением, содержащим строку “bar”.

A {color: green}

E (3) — соответствует элементу E, атрибут которого “foo” имеет значение в виде списка, разделенного тире и начинающегося (слева направо) с “en”.

A {color: green}

Множественный селектор атрибутов

Можно объединять несколько селекторов атрибутов вместе:

A {color: green}

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

Атрибуты или классы и идентификаторы?

Каково же преимущество использования атрибутов перед классами и идентификаторами?

Если добавлять атрибут специально для использования селектора, то преимуществ нет.

Но многие элементы разметки HTML имеют атрибуты для других целей. href и очень часто - атрибут title . Изображения всегда имеют атрибут alt . Элементы формы используют атрибут type . В коде HTML задействовано большое количество атрибутов. Почему бы не использовать преимущества селекторов атрибутов для них?

Кроме того, HTML5 имеет новый атрибут - data , который также может нести двойную нагрузку.

Селекторы атрибутов могут избавить код HTML от лишних классов и идентификаторов.