Значение в квадратных скобках css3. Селекторы атрибутов. Значение атрибута содержит указанную строку
Устанавливает стиль для элемента, если задан специфичный атрибут. Его значение в данном случае не важно.
Синтаксис[] { Описание правил стиля } E[] { Описание правил стиля }
Стиль применяется к тем элементам, внутри которых добавлен указанный атрибут. Пробел между именем селектора и квадратными скобками не допускается.
Обозначения| Указывает тип значения. | ||
| A && B | Значения должны выводиться в указанном порядке. | && |
| A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
| A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
| Группирует значения. | [ crop || cross ] | |
| * | Повторять ноль или больше раз. | [,]* |
| + | Повторять один или больше раз. | + |
| ? | Указанный тип, слово или группа не является обязательным. | inset? |
| {A, B} | Повторять не менее A, но не более B раз. | {1,4} |
| # | Повторять один или больше раз через запятую. | # |
Селекторы атрибутов q { font-style: italic; /* Курсивное начертание */ quotes: "\00AB" "\00BB"; /* Меняем вид кавычек в цитате */ } q { color: maroon; /* Цвет текста */ }
Продолжая известный закон Мерфи, который гласит: Если неприятность может случиться, то она обязательно случится, можем ввести свое наблюдение: После того, как веб-страница будет корректно отображаться в одном браузере, выяснится, что она неправильно показывается в другом.
Результат примера показан на рис. 1.
Рис. 1. Изменение стиля элемента в зависимости от применения атрибута title
В данном примере меняется цвет текста внутри контейнера , когда к нему добавляется атрибут title . Обратите внимание, что для селектора q нет нужды повторять стилевые свойства, поскольку они наследуются от селектора q .
СпецификацияКаждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация ) - спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация ) - группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация ) - на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект ) - более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor"s draft (Редакторский черновик ) - черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации ) - первая черновая версия стандарта.
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-правила, применяемые к большому числу аналогичных элементов.
Селекторы атрибутов - это селекторы, которые позволяют применить стили к любым 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 */ }
Результат в браузере
Не смотря на свою гибкость и разнообразие селекторы атрибутов в 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");
