CSS селекторы атрибутов и их разновидности. Специальные селекторы в CSS. Соседние, дочерние, контекстные селекторы и селекторы по атрибуту тега
Не смотря на свою гибкость и разнообразие селекторы атрибутов в 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»:
Селекторы атрибутов {background:#CCC}
Самостоятельное создание сайта | Язык HTML | Известный поисковик
В результате у меня получилось следующее:
Одно из нескольких значений атрибутаЧасто в задании атрибутов встречается перечисление нескольких значений через пробел. Как вы уже наверное догадались, можно задать свойства стилей для одного значения. Синтаксис такого способа следующий:
[атрибут~="значение"] { свойство1: значение; ... } селектор [атрибут~="значение"] { свойство1: значение; ... }
Предлагаю посмотреть небольшой пример:
Блок h2 { color: red;} Заголовок красного цвета
В результате должно получиться следующее:
Очень часто название значений атрибутов состоит из нескольких слов разделенных дефисом. И бывает так что первое слово в названии повторяется. Так вот для таких атрибутов можно отдельно задать стили. Делается это очень просто. Например вот так:
Div a { color:green; /* Цвет ссылок */ padding: 15px; /* Поля */ }
Общий синтаксис применения такой:
[атрибут|="значение"] { свойство1: значение; ... } селектор [атрибут|="значение"] { свойство1: значение; ... }
Вы можете не запоминать применение селекторов атрибутов, так как я уже говорил раньше что их используют довольно редко, но они являются очень гибким инструментом в веб-разработке. А пока я предлагаю перейти к следующей теме.
На этом уроке познакомимся с тем как найти элементы на странице по атрибуту.
В jQuery выборка элементов по атрибуту выполнена в соответствии со спецификацией CSS.
Когда Вы используете атрибуты для выбора элементов, учитывайте то, что некоторые атрибуты могут иметь несколько значений, разделенных между собой пробелом.
Например:
... ... ... // Выбрать элементы a, имеющие атрибут $("a");
Значение атрибута в выражении селектора должно быть заключено в кавычки. Осуществляется это одним из следующих способов:
- двойные кавычки внутри одинарных кавычек: $("a") .
- одинарные кавычки внутри двойных кавычек: $("").
- экранированные одинарные кавычки внутри одинарных кавычек: $("a") .
- экранированные двойные кавычки внутри двойных кавычек: $("a") .
В jQuery поиск элементов по атрибуту можно осуществить с помощью различных селекторов. Кроме этого Вы можете использовать для выбора элементов комбинацию из нескольких селекторов атрибутов. В этом случае будут выбраны только те элементы, которые отвечают каждому из указанных селекторов.
jQuery - Селекторы для поиска элементов по атрибутуВыбирает элементы, которые имеют указанный атрибут (name) со значением, равным заданной строки (value) или начинающимся с этой строки (value), за которой следует дефис.
Например, выбрать все элементы div , которые имеют атрибут class со значением, равным alert или начинающимся с alert- .
...
... ... ... ... ... //Выберет все элементы div, которые имеют атрибут class со //значением alert или со значением, начинающимся с alert- $("div");
Выбирает элементы, который имеют указанный атрибут (name) со значением, содержащим заданную подстроку (value).
Например: выбрать все элементы, которые имеют атрибут href, содержащий в качестве своего значения подстроку youtube:
... ... ... //Выберет элементы, которые имеют атрибут href со значением //содержащим подстроку youtube $("");
Выбирает элементы, которые имеют указанный атрибут (name) со значением, содержащим заданное значение (value) как одно из его значений (т.е. отделенно от другого значения пробелом) или равным этому значению (value).
Например, выбрать все элементы а, которые имеют атрибут class со значением, содержащим значение btn как одно из его значений (т.е. отделено от другого знаения пробелом) или равным btn:
... ... Отправить ... ... $("a");
Выбирает элементы, которые имеют указанный атрибут (name) со значением, которое заканчивается заданным значением (value).
Например, выбрать все элементы, которые имеют атрибут href , заканчивающийся на ".zip".
... ... ... //выберет все элементы а, у которых значение атрибута href заканчивается на.zip $("a");
Выбирает элементы, у которых указанный атрибут (name) имеет значение value .
Например, выбрать все элементы, которые атрибут type со значением button:
Информация о заказе $("");
Выбирает элементы, которые не имеют указанный атрибут (name) или имеют указанный атрибут (name), но он не содержит заданного значения (value).
Например, выбрать элементы a , которые не имеют атрибут rel или имеют его, но он не содержит значение nofollow.
... ... ... ... $("a");
Выбирает элементы, которые имеют указанный атрибут (name) со значением, начинающимся с заданного значения (value).
Например, выбрать все элементы а, имеющие класс btn и атрибут href со значением, начинающимся с "http".
... ... ... $("a.btn");
Выбирает элементы, которые имеют указанный атрибут (name). Значение данного атрибута (name) может быть любым.
Например, выбрать изображения (img), имеющие атрибут alt:
$("img");
- выбирает элементы, у которых указанные атрибуты (name1 и name2) имеют соответствующие значения (Value1 и Value2).
При необходимости вы можете использовать комбинации различных селекторов атрибутов для выбора элементов. В этом случае будут выбраны только те элементы, которые соответствуют всем указанным селекторам:
$(""); //attr1 - селектор атрибута 1 //attr2 - селектор атрибута 2 //attrN - селектор атрибута N
Например, выбрать элементы a , имеющие атрибут id , атрибут href начинающийся с http и атрибут class со значением, содержащим значение btn как одно из его значений или равным btn:
... ... $("a");
Влад Мержевич
Многие теги различаются по своему действию в зависимости от того, какие в них используются атрибуты. Например, тег может создавать кнопку, текстовое поле и другие элементы формы всего лишь за счёт изменения значения атрибута 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 . При этом ссылка будет открываться в новом окне и чтобы показать это, с помощью стилей добавляем небольшой рисунок перед текстом ссылки.
Пример 13.2. Стиль для открытия ссылок в новом окне
HTML5 CSS 2.1 IE Cr Op Sa Fx
Селекторы атрибутов 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 /* Жирное начертание */ }
