Селекторы атрибутов. CSS селекторы атрибутов и их разновидности
На этом уроке познакомимся с тем как найти элементы на странице по атрибуту.
В 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 /* Жирное начертание */ }
Ссылка в новом окне
Результат:
Как видим, оба элемента типа гиперссылка имеют атрибут target , но правило css, которое увеличивает текст ссылки в полтора раза и изменяет его цвет в красный, применяется к тегу у которого атрибут target имеет значение «_blank» .
3. Одно из нескольких значений атрибутаНекоторые значения атрибутов могут перечисляться через пробел, например имена классов. Чтобы задать правило стиля при наличии в списке значений атрибутов требуемого значения применяется следующий селектор:
[~=] { }
[~=] { }
Стиль применяется в том случае, если у атрибута имеется требуемое значение или оно входит в список значений, разделенных пробелами. Например:
{
color:red;
font-size:150%;
}
...
Наш телефон: 777-77-77
Наш адрес: Москва ул. Советская 5
Получиться следующий результат:
Правило применяется к элементу, у которого среди значений атрибута class имеется значение tel .
4. Дефис в значении атрибутаВ значениях идентификаторов и классов допускается использовать дефис. Для привязки стиля к элементам, значения атрибутов которых могут содержать дефис можно воспользоваться следующей конструкцией:
[атрибут|="значение"] { стиль }
Селектор[атрибут|="значение"] { стиль }
Стиль применяется к тем элементам, у которых значение атрибута начинается с указанного значения после, которого идет дефис. Например:
{
color:red;
font-size:150%;
}
...
Результат:
В примере правило стиля применяется только к тем элементам списка, у которых имя класса начинается со значения «menu- „ .
5. Значение атрибута начинается с определенного текстаДанный селектор устанавливает стиль для элемента, если значение атрибута тега начинается с определенного значения. Может быть два варианта:
[^=] { }
[^=] { }
В первом случае стиль применяется ко всем элементам, теги которых имеют атрибут с указанным именем и значением, начинающимся с указанной подстроки . Во втором случае тоже самое, только к определенным элементам указанным в основном селекторе . Пример:
a{
color:green;
font-weight:bold;
}
...
Результат:
В примере показано, как по разному отобразить внешние ссылки и внутренние ссылки. Внешние ссылки всегда начинаются со строки «http://». Поэтому в селекторе указываем, что стиль применять только к ссылкам, у которых атрибут href начинается со значения http:// .
6. Значение атрибута заканчивается определенным текстомПривязывает стиль к элементам, у которых значение атрибута заканчивается указанным текстом. Имеет следующий синтаксис:
[$=] { }
[$=] { }
В первом случае стиль применяется ко всем элементам, у которых имеется атрибут с указанным именем и имеет значение оканчивающееся указанной подстрокой . Во втором случае тоже самое, только к указанным селекторам . Таким способом, например, можно по разному отображать различные форматы графических изображений. Например:
IMG {
border: 5px solid red;
}
...
Картинка формата gif
Картинка формата png
Результат:
В примере все картинки с расширением gif будут отображаться с красной рамкой толщиной пять пикселей.
7. Значение атрибута содержит указанную строкуЭтот селектор привязывает стиль к тегам, значение атрибута которых содержат определенный текст. Синтаксис:
[*=] { }
[*=] { }
Стиль привязывается к элементам, у которых имеется атрибут с указанным именем и его значение содержит указанную подстроку . Например:
IMG {
border: 5px solid red;
}
...
Картинка из папки gallery
Картинка из другой папки
Результат:
В примере стиль применяется к картинкам, которые загружены из папки «gallery» .
На этом об селекторах атрибутов все. Все перечисленные методы можно комбинировать между собой:
Селектор[атрибут1="значение1"][атрибут2="значение2"] { стиль }
Кроме того напомню о специальных селекторах CSS:
- с помощью символов «+» и «~» формируются ;
- символ «>» привязывает css стили к дочерним тегам;
- символ формирует контекстные селекторы.
В следующих статьях мы рассмотрим также псевдоэлементы и псевдоклассы, которые предоставляют мощный инструмент управления стилями.
На этом все, до новых встреч.
CSS является мощным инструментом для веб разработки. Он позволяет воплощать в жизнь практически все наши задумки и идеи.
Важное преимущество CSS — это возможность применения стилей ко всем однотипным элементам страницы. Чтобы эффективно пользоваться данной возможностью, нужно хорошо разобраться с CSS селекторами
. Селектор — это как раз то, к чему применяется какое-либо правило.
Существует несколько видов CSS селекторов. Перейдем к рассмотрению этих видов и примеров их применения.
Универсальный селекторУниверсальный селектор задает стиль всем элементам документа. Обозначается символом звездочки (*). Например, данное определяет, что все элементы будут иметь красный цвет:
* {color: red;}
Селекторы элементовКогда пишутся стили для HTML документа, то в качестве элементов выступают HTML теги (h1, p, img, a, body...). Например:
H1 { font-family:Verdana; font-size:12px; color:#666; }
В данном случае все заголовки первого уровня в документе будут иметь шрифт Verdana, размер 12px и серый цвет.
Селекторы классовДанный селектор позволяет назначить стиль независимо от типа элемента. Но для их работы нужно добавить некоторые пометки в HTML код, а именно атрибут class с каким либо значением, которое вы будите использовать при создании CSS правила.
Допустим, необходимо некоторые изображения на странице обвести в рамку. Для этих изображений прописывается атрибут class . Например:
А в файле стилей пишем правило:
Border_img {border:1px solid #00f;}
Данный класс можно применять ко многим элементам страницы и не обязательно только к изображениям. К одному HTML элементу можно применить сразу несколько классов, которые пишутся через пробел:
Селекторы идентификаторовТоже позволяет назначить стиль независимо от типа элемента. Но, в отличии от селектора классов, может использоваться в документе только один раз. Обозначается символом решетки (# ). У тега прописывается атрибут id . Например:
... #menu { width:25%; background-color:#ccc; float:left; }
Селекторы атрибутовПрименяются для выбора элементов на основании их атрибутов, а так же значений этих атрибутов.
Для выбора элемента по его атрибуту, независимо от значения этого атрибута используется следующая конструкция: [атрибут] . Например, нам понадобилось отметить красной рамкой изображения у которых задан атрибут alt . Делаем так:
img {border:1px solid red;}
Можно выбрать только те теги, атрибуты которых имеют определенное значение. Нужно, например, ко всем тегам с атрибутом type , значение которого text , применить правило — размер текста 16px. Делается следующим образом:
{font-size:16px;}
Если нужно выбрать элементы, атрибут class которых содержит слово img , то используется такой код:
{margin:5px;}
Если нужно выбрать атрибут, значение которого начинается с какого-либо текста:
{color:#009};
Если нужно выбрать атрибут, значение которого заканчивается на какой-либо текст:
{font-size:10px;}
Если нужно выбрать атрибут, значение которого содержит какой-либо текст:
{background-color:#0cc;}
Селекторы потомков (контекстные селекторы)Селекторы потомков подразумевают задание правил для тех элементов, которые находятся внутри какого-то определенного элемента. Понятнее будет на примере. Допустим нужно выделить красным цветом только те ссылки a , которые находятся внутри параграфа p и являются к нему дочерними:
p>a {color:red;} Селекторы сестринских (соседних) элементовДля выбора соседних элементов, расположенных на одном уровне, имеющих одного родителя делаем так:
Для выбора элементов, расположенных на одном уровне, имеющие одного родителя делаем так.
strong + em {font-style:italic;}Соседними в данном случае являются теги strong и em , а так же em и a .
Селекторы псевдоклассовПсевдокласс - это фантомный класс, наличие которого зависит от состояния элемента или структуры документа в целом. Псевдоклассы часто используются в элементах форм ввода либо для задания поведения ссылок или активных элементов.
Например, нужно изменить цвет посещенных ссылок:
A:visited {color:#933;}
Или, например, изменить цвет текста при фокусе (установке курсора) на текстовом поле формы:
Input:focus {color: red;}
Селекторы псевдоэлементов
Псевдоэлементы - это условные фиктивные элементы, которые являются частью существующих элементов или вводятся в документ дополнительно. Селектор псевдоэлементов и селектор псевдоклассов, точки зрения синтаксиса - это фактически одно и то же. Разница только в выбираемых элементах.
В CSS2 определено 4 псевдоэлемента: первая буква (:first-letter ), первая строка (:first-line ) и применение специальных стилей до (:before )и после (:after ) элемента.
Зададим, к примеру, первой букве каждого абзаца свой стиль:
P:first-letter { font-family: Verdana, Geneva, sans-serif; font-size: 12px; color: #333; }
Посредством селекторов можно довольно просто создавать CSS-правила, применяемые к большому числу аналогичных элементов.