CSS: Псевдо-элементы и селекторы атрибутов. Селекторы атрибутов Атрибуты css3

Пример 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.

Псевдо-элементы позволяют стилизовать определенные части документа. Например псевдо-элемент::first-line предназначен для добавления стилей только к первой строке указанного элемента. В спецификации CSS3 псевдо-элементы начинаются с двойного двоеточия - ":: ":

P::first-letter { font-size: 120%; }

Двойное двоеточие было введено в CSS3 для визуального различия псевдо-классов и псевдо-элементов. Однако, псевдо-элементы, которые были добавлены еще в CSS2 (такие как: first-letter, first-line, before и after), могут быть записаны и с одним двоеточием, такой синтаксис использовался до появления спецификации CSS3 и поддерживается всеми браузерами. Синтаксис с двойным двоеточием поддерживается только в новых версиях браузеров и в обязательном порядке должен применяться только к псевдо-элементу::selection, который был добавлен в CSS3.

Примечание: каждый селектор может содержать только один псевдо-элемент, который должен быть определен в самом конце селектора: #header .menu span::first-letter { color: green; }

Псевдо-элемент::first-letter

Псевдо-элемент::first-letter позволяет применить стиль к первой букве в тексте родительского элемента. Например, для стилизации первой буквы в абзаце нам бы пришлось заключить ее в элемент и применить стиль к нему:

Наш текст

Или мы можем стилизовать первую букву в тексте с помощью псевдо-элемента::first-letter, в этом случае нам не придется добавлять лишний элемент в HTML-разметку:

Наш текст

Псевдо-элемент::first-line

Псевдо-элемент::first-line применяет стиль к первой строке текста в элементе:

P { width: 200px; } p::first-line { color: blue; } Попробовать »

Особенность псевдо-элемента::first-line состоит в том, что он будет стилизовать только первую строку, ширина которой будет зависеть от ширины элемента, то есть на более маленьких экранах или при уменьшении окна браузера будет меняться и ширина первой строки, но ее оформление будет оставаться неизменным.

Псевдо-элементы::before и::after

Для добавления генерируемого содержимого в документ используются псевдо-элементы::before и::after. С их помощью можно разместить генерируемое содержимое до и после содержимого в указанном элементе. Для определения содержимого, которое будет добавлено, используется CSS свойство content.

Допустим, у нас есть достаточно большой по объему текст, он содержит ссылки, но по оформлению они практически никак не отличаются от остального текста. И нам нужно перед каждой ссылкой поместить небольшую иконку, которая будет указывать пользователям, что это ссылка:

A { text-decoration: none; color: black; } a::before { content: url("link.png"); } Попробовать »

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

Селекторы атрибутов поддерживаются всеми современными браузерами (исключение составляет IE6, хотя его уже нельзя отнести к современным браузерам, стоит учитывать тот факт, что некоторые пользователи все еще его используют. Поэтому, если вам необходимо написать код, одинаково хорошо работающий во всех браузерах, включая IE6, то советуем вам воздержаться от использования селекторов атрибутов).

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

Img { border: 1px solid red; }

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

• элемент[атрибут^="значение"] ^= означает "начинается с...".
• элемент[атрибут$="значение"] - селектор атрибута с совпадением по подстроке. Оператор $= означает "заканчивается на...".
• элемент[атрибут*="значение"] - селектор атрибута с совпадением по подстроке. Оператор *= означает "содержит подстроку...".

В качестве примера приведем оформление ссылок, ссылающихся на внешний ресурс, электронный адрес и файл с расширением.pdf:

A { padding-left: 20px; background-image: url("img1.png"); background-repeat: no-repeat; } a { padding-left: 20px; background-image: url("img2.png"); background-repeat: no-repeat; } a { padding-left: 20px; background-image: url("img3.png"); background-repeat: no-repeat; } Попробовать »

В подобных ситуациях селекторы атрибутов полезно использовать для внесения привлекательных дополнений в дизайн ваших веб-страниц.

Библиотека jQuery позволяет управлять свойствами и атрибутами элементов обернутого набора, изменяя первоначальные значения. Можно устанавливать новые свойства, получать и изменять значения первоначальных свойств. Удаляя или добавляя классы, можно динамически изменять стиль отображения элементов.

Манипулирование свойствами и атрибутами элементов

1. Добавление и удаление класса

1.1. Метод.addClass()

Добавляет указанный класс (или несколько классов) к каждому элементу обернутого набора. Чтобы данный метод сработал, необходимо заранее создать стиль для добавляемого класса. Метод не удаляет старый класс, а просто добавляет новый.

AddClass(имя класса) имя класса — одно или больше имен класса, отделённых друг от друга пробелами. .addClass(функция) функция — возвращает одно или более имен класса, разделенных пробелом, которые будут добавлены к существующим. В качестве аргумента принимает индекс элемента в наборе и существующее имя класса(ов).

1.2. Метод.removeClass()

Удаляет указанное имя класса(ов) у всех элементов обернутого набора.

RemoveClass(имя класса) имя класса — необязательный параметр, одно или более имен класса, разделенных пробелом. Если имя класса не указано, метод удаляет все существующие классы у элементов набора. Если имя класса задано — удаляет только указанный класс. .removeClass(функция) функция — возвращает одно или более имен класса, разделенных пробелом, которые будут удалены из существующих. В качестве аргумента принимает индекс элемента в наборе и старое имя класса(ов).

1.3. Метод.toggleClass()

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

ToggleClass(имя класса) имя класса — одно или более имен класса, разделенных пробелами, которые будут переключаться для каждого элемента набора. .toggleClass(имя класса, логическое значение) имя класса — одно или более имен класса, разделенных пробелами, которые будут переключаться для каждого элемента набора. логическое значение — устанавлвает, добавить или удалить указанный класс. Значение true добавляет класс, false — удаляет. .toggleClass(логическое значение) логическое значение — необязательный параметр, устанавливает, будут ли переключаться классы каждого элемента набора. .toggleClass(функция, логическое значение) функция — возвращает имя класса, которое будет переключаться для каждого элемента набора. В качестве аргументов получает индекс элемента в наборе и старое значение класса. логическое значение — необязательный параметр, устанавливает, будут ли переключаться классы каждого элемента набора.

1.4. Метод.hasClass()

Проверяет наличие указанного имени класса хотя бы у одного элемента в соответствующем наборе. Возвращает true , если хотя бы один из элементов в наборе имеет проверяемое имя класса, в противном случае — false .

HasClass(имя класса) имя класса — строка с именем класса для поиска.

2. Изменение атрибутов элементов

Метод получает значение атрибута первого элемента набора или устанавливает одно или более значений атрибутов для элементов набора.

2.1. Метод.attr()

2.2. Метод.removeAttr()

Удаляет указанный атрибут у каждого элемента обернутого набора.

RemoveAttr(имя атрибута) имя атрибута — строка, определяющая атрибут для удаления.

3. Изменение свойств элемента

3.1. Метод.css()

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

Css(имя свойства) имя свойства — строка с именем свойства, возвращает его вычисляемое значение для первого элемента набора. .css(имена свойств) имена свойств — массив свойств, возвращает их вычисляемые значения для первого элемента набора. .css(имя свойства, значение) имя свойства значение — строка или число, которые будут установлены в качестве значения указанного свойства для всех элементов обернутого набора. .css(имя свойства, функция) имя свойства — строка с именем свойства. функция — в качестве аргументов функции передается индекс элемента в наборе и старое значение свойства. Возвращаемое значение будет установлено для всех элементов набора. .css(объект свойств) объект свойств — добавляет CSS-свойства, имена которых определены как ключи в переданном объекте, в связанные с ними значения для всех элементов в соответствующем наборе.

4. Получение и изменение размеров и координат элемента

4.1. Метод.width()

Возвращает текущее значение ширины для первого элемента в наборе или устанавливает ширину для каждого элемента набора. Единица измерения по умолчанию px . Метод можно использовать в случае, если полученное значение будет использоваться в математических расчетах. Размеры вычисляются без учета отступов и толщины рамки, без указания единицы измерения. При изменении размеров окна браузера размеры элемента могут изменяться.

Width() Метод вызывается без параметров. Возвращает текущее значение ширины для первого элемента в наборе без указания единицы измерения. .width(значение) значение — целое числовое значение или строка-значение ширины, которое будет установлено для каждого элемента набора. .width(функция) функция — принимает в качестве аргумента индекс элемента и старое значение свойства, возвращаемое значение будет установлено как ширина для всех элементов.

4.2. Метод.height()

Возвращает текущее значение высоты для первого элемента в наборе или устанавливает высоту для каждого элемента набора.

Height() Метод вызывается без параметров. Возвращает текущее значение высоты для первого элемента в наборе. .height(значение) значение — целое числовое значение или строка-значение высоты, которое будет установлено для каждого элемента набора. .height(функция) функция — принимает в качестве аргумента индекс элемента и старое значение свойства, возвращаемое значение будет установлено как высота для всех элементов.

4.3. Метод.innerWidth()

Возвращает ширину первого элемента в обернутом наборе с учетом отступов padding или устанавливает ее для каждого элемента обернутого набора.

InnerWidth() Метод вызывается без параметров. Возвращает текущее значение внутренней ширины для первого элемента в наборе. .innerWidth(значение) значение — целое числовое значение, которое будет установлено для каждого элемента набора. .innerWidth(функция) функция

4.4. Метод.innerHeight()

Возвращает высоту первого элемента в обернутом наборе с учетом отступов padding .

InnerHeight() Метод вызывается без параметров. Возвращает текущее значение внутренней высоты для первого элемента в наборе. .innerHeight(значение) значение — целое числовое значение, которое будет установлено для каждого элемента набора. .innerHeight(функция) функция — принимает в качестве аргумента индекс элемента и старое значение свойства, возвращаемое значение будет установлено как внутренняя ширина для всех элементов набора.

4.5. Метод.outerWidth()

Возвращают ширину первого элемента в обернутом наборе. В эти размеры входят толщина рамки и ширина отступа.

OuterWidth(логическое значение) логическое значение

4.6. Метод.outerHeight()

Возвращают высоту первого элемента в обернутом наборе. В эти размеры входят толщина рамки и ширина отступа.

OuterHeight(логическое значение) логическое значение — необязательное значение, если установлено true , значение margin учитывается, в противном случае нет.

4.7. Метод.offset()

Получает текущие координаты первого элемента или устанавливает координаты для каждого элемента. Возвращает объект JavaScript со свойствами left и top , содержащими координаты первого элемента в px обернутого набора относительно начала документа. Метод применяется только к видимым элементам.

Offset() Метод вызывается без параметров.

4.8. Метод.position()

Возвращает объект JavaScript со свойствами left и top , содержащими координаты первого элемента в px обернутого набора относительно ближайшего родительского элемента. Метод применяется только к видимым элементам.

Position() Метод вызывается без параметров.

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

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

Селектор вида

<основной селектор>[<имя атрибута тега>] { <стиль> }

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

Пример:

TD { background-color: grey }

Этот стиль будет привязан к ячейкам таблицы, теги которых имеют атрибут ROWSPAN, т. е. к ячейкам, объединенным по горизонтали.

Селектор вида

<основной селектор>[<имя атрибута тега>=<значение>] { <стиль> }

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

Пример:

TD { background-color: grey }

Данный стиль будет привязан к ячейкам таблицы, теги которых имеют атрибут ROWSPAN со значением 2, т. е. к двойным ячейкам, объединенным по горизонтали.

Селекторы вида

<основной селектор>[<имя атрибута тега>~=
<список значений, разделенных пробелами>] { <стиль> }

<основной селектор>[<имя атрибута тега>|=
<список значений, разделенных запятыми>] { <стиль> }

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

Пример:

TD { background-color: grey }
TD { border: thin dotted black }

Эти стили будут привязаны к ячейкам таблицы, теги которых имеют атрибут ROWSPAN со значениями 2 и 3, т. е. к двойным и тройным ячейкам, объединенным по горизонтали.

Селектор вида

<основной селектор>[<имя атрибута тега>^=<подстрока>] { <стиль> }

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

Пример:

IMG { margin: 5px }

Этот стиль будет привязан к графическим изображениям, теги которых имеют атрибут SRC со значением, начинающимся с подстроки "http://www.pictures.ru", т. е. к изображениям, взятым с Web-сайта http://www.pictures.ru.

Селектор вида

<основной селектор>[<имя атрибута тега>$=<подстрока>] { <стиль> }

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

Пример:

IMG { margin: 10px }

Данный стиль будет привязан к графическим изображениям, теги которых имеют атрибут SRC со значением, заканчивающимся подстрокой "gif", т. е. к изображениям формата GIF.

Селектор вида

<основной селектор>[<имя атрибута тега>*=<подстрока>] { <стиль> }

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

Пример:

IMG { margin: 10px }

Этот стиль будет привязан к графическим изображениям, теги которых имеют атрибут SRC со значением, включающим подстроку "/picts/", т. е. к изображениям, взятым из папки picts Web-сайта, откуда они загружены.

Псевдоэлементы

Псевдоэлементы - разновидность специальных селекторов, привязывающих стиль к определенному фрагменту элемента Web-страницы. Таким фрагментом может быть первый символ или первая строка в абзаце.

Псевдоэлементы используются не сами по себе, а только в совокупности с другими стилями. Их записывают сразу после основного селектора без всяких пробелов:

<основной селектор><псевдоэлемент> { <стиль> }

Псевдоэлемент::first-letter привязывает стиль к первой букве текста в элементе Web-страницы, если ей не предшествует встроенный элемент, не являющийся текстом, например, изображение.

Пример:

P::first-letter { font-size: larger }

Этот стиль будет привязан к первой букве абзаца.

Псевдоэлемент ::first-line привязывает стиль к первой строке текста в элементе Web-страницы:

P::first-line { text-transform: uppercase }

Данный стиль будет привязан к первой строке абзаца.

Соответствует всем элементам с атрибутом attribute равным value . Если value состоит из нескольких слов, между которыми есть пробелы, то нужно заключать value в кавычки. Если value не содержит пробелов — кавычки не обязательны.

Примеры использования:

Замечание 1 : Несмотря на то, что с помощью селектора можно находить элементы по аттрибутам class или id, более правильным будет использовать специальные селекторы по классу и идентификатору . Это касается и многих атрибутов в элементах форм, для которых существуют отдельные селекторы.

Замечание 2 : Во всех версиях jQuery, начиная с 1.2, использование символа "@" перед аттрибутом не нужно.

В действии

Все элементы, которые имеют подсказку (аттрибут title) с текстом "Не влезай - убьет" будут окрашены в желтый цвет с красными рамками:

~lt~!DOCTYPE html~gt~ ~lt~html~gt~ ~lt~head~gt~ ~lt~script src="http://code.jquery.com/jquery-latest.js"~gt~~lt~/script~gt~ ~lt~style~gt~ div, span { display: block; width: 50px; height: 50px; float: left; padding: 15px; margin: 5px; background-color: #eee; font-size: 20pt; } ~lt~/style~gt~ ~lt~/head~gt~ ~lt~body~gt~ ~lt~div title="Не влезай - убьет"~gt~ 1 ~lt~/div~gt~ ~lt~div title="А тут безопасно"~gt~ 2 ~lt~/div~gt~ ~lt~span title="Не влезай - убьет"~gt~ 3 ~lt~/span~gt~ ~lt~script~gt~ $("") .css({"border":"3px solid red", "background-color": "#ffcc00"}); ~lt~/script~gt~ ~lt~/body~gt~ ~lt~/html~gt~