CSS селекторы – что это, зачем нужны и какими они бывают. Селекторы атрибутов

Группировка

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

Img { /* эти стили применятся только к изображениям, у которых есть все три перечисленных атрибута */ } a { /* эти стили применятся только к ссылкам, в адресах которых есть подстрока "сайт" и для которых задан атрибут title */ }

Область применения

Перечисленные выше селекторы атрибутов (включая CSS3) поддерживаются всеми популярными браузерами. Единственное исключение — IE6.

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

Не смотря на свою гибкость и разнообразие селекторы атрибутов в 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: значение; ... }

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

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

Селекторы в CSS

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

P{ стили… }

В данном случае селектором выступает p – тег абзацев. Такое правило добавит стили для всех абзацев на веб-странице.

Какими бывают css селекторы?

Селектор тега – самый простой . Он был продемонстрирован в примере. Чтобы записать его в css, нужно написать имя тега без угловых скобок. Стили будут применены ко всем элементам с таким тегом.
table{} – стили для всех таблиц
li{} – стили для всех пунктов списка
a{} – стили для всех ссылок

Стилевой класс – к любому элементу на веб-странице можно привязать стилевой класс. Даже к одной букве. Потом в css-файле можно обратиться к этому элементу, прописав для него собственные стили. Для этого нужно поставить точку и написать имя стилевого класса после нее. Примеры:
.about{} – правила применятся ко всем элементам, которые имеют атрибут class = "about"
.down{} – правила применятся ко всем элементам, которые имеют атрибут class = "down"
.float{} – правила применятся ко всем элементам, которые имеют атрибут class = "float"

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

Идентификатор – еще один вид селекторов. Один идентификатор можно задать только одному элементу. Он не может иметь двух идентификаторов, а также id привязанный к этому элементу, не может быть прописан нигде более.

Задается он так:

Абзац

То есть также, как и класс, только используется атрибут id в качестве значения которого используется любое слово.

Чтобы обратиться к элементу с идентификатором через css нужно написать значение id и перед ним поставить решетку.

#first{ font-size: 22px }

Мы обратились к абзацу с id = first . Стиль применится только к нему. У остальных абзацев размер шрифта не изменится.

Псевдоклассы

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

Псвевдокласс – это стилевой класс элемента, который мы на самом деле не задавали сами, просто он есть сам по себе. Например, увидев в html такой код:

Абзац

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

Для ссылок

Для полей ввода и ссылок

:focus – стиль применяется к элементу, который получает фокус ввода.
На самом деле для полей ввода появилось очень много новых классных псевдоклассов, но все они впервые введены в CSS3 , а в этой статье я хотел бы обсудить только самые простые. О CSS3 селекторах обязательно будет статья в дальнейшем.

Для всех элементов

1. :hover – стиль применяется при наведении на элемент
2. :first-child – выбрать первый дочерний элемент
3. :last-child – последний дочерний элемент
4. :nth-child() – в скобках записывается число или формула, которая определяет, какие элементы будут выбраны.
5. :first-of-type, :last-of-type, :nth-of-type() – работают практически аналогично предыдущим псевдоклассам. Разница только в том, что здесь учитывается тип элемента. Разницу можно почувствовать на примере:
   li:first-child – будет выбран первый пункт списка, но только в том случае, если в родительском блоке элемент li идет первым. Если до него стоит другой тег, не выберется ничего.
6. li:first-of-type – будет выбран первый пункт списка из всех, что есть в родителе. При этом не важно, где они располагаются в коде. Надеюсь, разница понятна.
7. :nth-last-child – работает аналогично:nth-child, но отсчет ведется от последнего элемента, а не от первого.
8. :nth-last-of-type – аналогично:nth-last-child, но с учетом типа элемента.

Это не все псевдоклассы, но самые популярные и необходимые. Собственно, все псевдоклассы помечаются в css одинаково, через двоеточие. К тому же можно комбинировать селекторы и получать интересные возможности:
a:visited:active – стили для уже посещенной ссылки, на которую кликают.
div:first-child:hover – стили для всех первых блоков в их родителях, на которые наводят курсор.

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

Объединение селекторов

Еще одно важное правило, о котором нужно знать. Селекторы стилевых классов можно записать, не отделяя их друг от друга. Например:
.class1.class2 – выберет те элементы, у которых есть оба этих класса.
.class1.class3.class8 – выберет элементы, к которым привязаны все три стилевых класса.

Вложенные селекторы

Если отделять селекторы друг от друга пробелами, то можно оттянутся до нужного нам элемента. Примеры:
table td – выберет все ячейки, лежащие в таблицах
ul li a – выберет все ссылки, лежащие в пунктах списков (а пункты списков в свою очередь лежат в самих списках)
.class1 p – выберет все абзацы с атрибутом class = “class1”
.class2 p span – выберет все содержимое тегов, лежащее в абзацах с классом class2.

Вкладывать и комбинировать таким образом можно сколько угодно раз. Примеры:
#header .logo span:first-letter{} – выберет первую букву в спане логотипа, который расположен в шапке
.class1.class2:hover{} – определит стиль при наведении мышки для элементов, которые имеют оба стилевых класса.

Дочерние селекторы

Если вам нужно задать стили для элементов родителя, которые являются НАПРЯМУЮ дочерними , то нужно прописать это так:
ul > li{} – выберет пункты списка, которые вложены в него напрямую, а не лежат в других тегах
p > a{} – выберет только те ссылки в абзацах, которые лежат непосредственно в них, а не вложены в другие теги (которые, в свою очередь, уже вложены в абзацы)
Пример:

Если прописать такой селектор p > a , то применятся ли стили к ссылке в вышеприведенном примере? Нет, потому что она еще вложена в другой тег, то есть не является напрямую дочерней.

Соседние селекторы

Последнее, что мы сегодня рассмотрим. Если прописать в css так:
.class1 + .class4 {} , то этот селектор выберет элемент с атрибутом class = "class4" , и этот элемент должен стоять в HTML-коде сразу же за элементом с классом class1. Только в этом случае все будет работать. Опять же рассмотрим на примере:

Сработает ли вышеуказанный селектор (.class1 + .class4 {})? Нет, потому что элементы не стоят рядом. Между ними находится тег img . Вот если его удалить, тогда все заработает.

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

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

Позволяют выбрать определенные элементы, не привязывая к ним стилевой класс или идентификатор.

Селекторы атрибутов, это те селекторы, в которых в квадратных скобках записывается атрибут, либо атрибут со значением. Несколько примеров, чтобы было понятно:
* – выбирает все элементы, которые имеют атрибут href с любым значением.
input – выбирает все input-элементы, у которых есть атрибут disable (все отключенные поля).
input – выбирает все поля, тип которых password , то есть поля для ввода пароля.
img – выбирает картинку, у которой задан атрибут src = "/logo.png" .

Как видите, прописывать css селекторы атрибутов не так уж и сложно. Их самое главное отличие – квадратные скобки, в которых записывается либо просто атрибут, либо атрибут с его точным значением. Но на этом функционал этих селекторов не заканчивается.

Продвинутые css селекторы атрибутов

Все нижеперечисленные селекторы чувствительны к регистру.
Поиск в начале строки
div – выбирает все div-ы, у которых есть стилевой класс, начинающийся на "block" . Таким образом, будут выбраны, например, такие блоки: "block-head", "block-3", "blocknote" . Главное, чтобы в начале значения было ключевое слово.

Поиск в конце строки
a – выбирает все ссылки, у которых адрес заканчивается на.rar . Таким образом, если у вас на сайте можно что-то скачать, то вы можете добавить иконку рядом со всеми ссылками на архивные файлы.

Поиск подстроки везде в значении
span – выберет все теги span, у которых в имени класса в любом месте этого имени содержится “art”. Таким образом, будут выбраны, например, спаны с такими классами: party, clart, art-1.

Поиск префиксов
p – выберет абзацы со стилевым классом, которые имеют имя, либо точно совпадающее с “first”, либо содержащие префикс first- , с которого начинается имя класса.

Поиск слов внутри значения
input – выберет все элементы input, в которых значение атрибута идентификатора содержит в себе слово text . Его отличие от поиска подстроки везде отличается тем, что входить должно именно слово, а не подстрока.

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

Для чего могут пригодиться селекторы атрибутов

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

Реализовать это можно так:

A {css-правила}

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

Css3 селекторы и псевдоклассы

О новых css3 селекторах, о которых не писал в прошлых статьях.

Улучшение работы с формами

Это новые псевдоклассы. В основном все они касаются новых возможностей форм.
:enabled – псевдокласс выберет все активные поля. То есть те, в которые можно что-то записать или они хотя бы доступны для чтения.
:disabled – противоположный псевдокласс, выбирает все заблокированные поля. Соответственно, с его помощью вы можете добавить дополнительные стили таким полям.
:read-only – выбор всех input , которые доступны только для чтения.
:read-write – выбираются все поля, которые доступны для редактирования.

Добавление стилей с учетом валидности

Также появились очень интересные псевдоклассы, с помощью которых вы можете назначить стили в зависимости от валидности или невалидности введенного значения. Раньше это можно было сделать только с помощью JavaScript .
:valid – выбирает все поля, введенное значение в которых удовлетворяет требованиям. Сами требования обычно задают с помощью атрибута pattern. Также может зависеть от типа поля. Например, поле, в котором пишется адрес электронной почты, будет считаться невалидным, если во введенном значении нет @ .
:invalid – соответственно, выбирает все невалидные поля, в которых значение не соответствует тому, что ожидается. Например, вы можете сделать цвет текста в таких полях красным:

Input:invalid{ color: red; }

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

Стили для обязательных полей

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

Псевдокласс:not

:not является своего рода антиселектором, который позволяет определить, к каким элементам НЕ ПРИМЕНЯТЬ стили. Пару примеров.
a:not(:last-child){} – выберет все ссылки на странице, кроме последней.
.nav:not(li){} – выберет все элементы с классом nav , но это не должны быть пункты списка (li).
#article p:not(.special:first-child) – выберет все абзацы в блоке article , кроме первого абзаца с классом special.

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

Вот такой вот нужный иногда псевдокласс, он нужен не только в теории, но и на практике. Ах да, еще же вы можете продолжить составление селектора после:not (). Например:
div:not(#header) .wrap – выбирает все дивы c классом wrap , кроме дива с id="header"

Это были селекторы, которые появились в CSS3.

Приоритет css селекторов

Чтобы определить, какие стили являются более приоритетными, пользуйтесь простыми правилами:
Идентификатор является самым приоритетным селектором. Если у элемента есть стилевой класс и id , и в обоих назначены одинаковые свойства с разными значениями, то будет выполнены те стили, которые записаны для идентификатор.

Класс является более приоритетным селектором, чем селектор тега (p, table, ul). Псевдокласс имеет такой же вес, что и простой класс. p:first-line приоритетнее, чем.firstline , потому что во втором селекторе просто класс, а в первом — селектор тега + псевдокласс.

Еще одно полезное правило — чем конкретнее селектор, тем более приоритетными являются стили для него. Например, между body и p битву выигрывает абзац, поскольку это более конкретный селектор, чем body (потому что это вся страница, то есть не очень конкретно). А table p , в свою очередь, конкретнее, чем просто p . В общем, просто знайте о таких правилах.

Итог

В этой статье были рассмотрены почти все селекторы CSS. Хочу еще добавить, что если вы используете jQuery, то там свои селекторы, хотя очень похожие на эти, но небольшие различия есть.

Селекторы атрибутов - это селекторы, которые позволяют применить стили к любым 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

Результат в браузере

Влад Мержевич

Многие теги различаются по своему действию в зависимости от того, какие в них используются атрибуты. Например, тег может создавать кнопку, текстовое поле и другие элементы формы всего лишь за счёт изменения значения атрибута 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. Стиль для открытия ссылок в новом окне

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.