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

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

Селекторы атрибутов { text-decoration: none; /* убираем подчеркивание у элементов с атрибутом href */ font-weight: bold; /* увеличиваем жирность шрифта */ } { color: red; /* красный цвет текста */ } [селектор атрибутов2] { свойство: значение; ... }

селектор[селектор атрибутов] { свойство: значение; ... }

селектор[селектор атрибутов1][селектор атрибутов2] { свойство: значение; ... }

Пример объединения селекторов атрибутов в CSS

Объединение селекторов атрибутов img { border: 3px red solid; /* стили рамки картинок с alt */ } { border: 3px green solid; /* стили рамок элементов с title и alt */ }

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

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

Многие теги различаются по своему действию в зависимости от того, какие в них используются атрибуты. Например, тег может создавать кнопку, текстовое поле и другие элементы формы всего лишь за счёт изменения значения атрибута type . При этом добавление правил стиля к селектору INPUT применит стиль одновременно ко всем созданным с помощью этого тега элементам. Чтобы гибко управлять стилем подобных элементов, в CSS введены селекторы атрибутов. Они позволяют установить стиль по присутствию определённого атрибута тега или его значения.

Рассмотрим несколько типичных вариантов применения таких селекторов.

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

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

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

В примере 13.1 показано изменение стиля тега , в том случае, если к нему добавлен атрибут title .

Пример 13.1. Вид элемента в зависимости от его атрибута

HTML5 CSS 2.1 IE Cr Op Sa Fx

Селекторы атрибутов Q { font-style: italic; /* Курсивное начертание */ quotes: "\00AB" "\00BB"; /* Меняем вид кавычек в цитате */ } Q { color: maroon; /* Цвет текста */ }

Продолжая известный закон Мерфи, который гласит: Если неприятность может случиться, то она обязательно случится, можем ввести свое наблюдение: После того, как веб-страница будет корректно отображаться в одном браузере, выяснится, что она неправильно показывается в другом.

Результат примера показан на рис. 13.1.

Рис. 13.1. Изменение стиля элемента в зависимости от применения атрибута title

В данном примере меняется цвет текста внутри контейнера , когда к нему добавляется title . Обратите внимание, что для селектора Q нет нужды повторять стилевые свойства, поскольку они наследуются от селектора Q .

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

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

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

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

Селекторы атрибутов A { background: url(images/blank.png) 0 6px no-repeat; /* Параметры фонового рисунка */ padding-left: 15px; /* Смещаем текст вправо */ }

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

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

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

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

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

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

Предположим, что на сайте требуется разделить стиль обычных и внешних ссылок — ссылки, которые ведут на другие сайты. Чтобы не вводить в тег новый класс, воспользуемся селекторами атрибутов. Внешние ссылки характеризуются добавлением к адресу протокола, например, для доступа к гипертекстовым документам используется протокол HTTP. Поэтому внешние ссылки начинаются с ключевого слова http:// , его и добавляем к селектору A , как показано в примере 13.3.

HTML5 CSS 2.1 IE Cr Op Sa Fx

Селекторы атрибутов A { font-weight: bold /* Жирное начертание */ }