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

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

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

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

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

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

Пример:

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~

Библиотека 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() Метод вызывается без параметров.

Порой бывает необходимо, обратиться к какому-либо элементу страницы, у которого не прописан class или ID, не имея возможности добавить class или ID в html. CSS Обратиться к любому элементу по атрибутам – вот выход из ситуации.

Часто такие ситуации складываются, когда html код генерируется внешним подключаем script, и не может быть изменен вами. Но при этом его необходимо стилизовать, или изменить вид на CSS.

Итак, есть такая штука, как селекторы по атрибутам html. С этой помощью можно на CSS обратиться к любому элементу по атрибутам. Атрибуты – это те самые атрибуты тэгов html, которые src, href, data-*, title, name, rel, alt и др.

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

Рассмотрим примеры: CSS Обратиться к любому элементу по атрибутам

Например, если у нас есть пиксельная иконка, которую генерирует код PayPal, и на мобильной версии её нужно скрыть (потому, что сильно мешает). Тогда достаточно просто можно это сделать, на чистом CSS:

Или, например, нужно скрыть все элементы с title, который начинается на «Отправлено «. Так и сделаем:

Всего есть несколько таких селекторов:

• – все элементы, у которых есть такой атрибут
• – все элементы, у которых атрибут точно = значению
• – все элементы, у которых атрибут содержит значение (должно быть целое слово)
• – все элементы, у которых атрибут начинается значением (должно быть целое слово)
• – все элементы, у которых атрибут начинается значением (может быть не целое слово
• – все элементы, у которых атрибут заканчивается значением (может быть не целое слово)
• – все элементы, у которых атрибут содержит значение (может быть набор символов, а не целое слово)

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

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