Селектор по значению атрибута. 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");

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

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

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

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

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

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

img{ display: none; }

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

... ... ... div{ display: none; }

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

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

Важно! IE6 не понимает этот селектор.

Подробнее про селектор атрибутов Выбор по наличию атрибута

Выбираем все элементы, у которых существует (задан в HTML) данный атрибут.

Синтаксис:

Element

Тут и далее Element , это какой-либо простой селектор (div , p , .header , div#popup , * и т.д.). Отсутствие в коде Element обозначает, что в этом месте стоит , который, в этой ситуации можно опустить.

Пример. Выделим жирным шрифтом все элементы, для которых задана всплывающая подсказка:

{ font-weight: bold; }

Выбор по точному значению атрибута

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

Синтаксис:

Element

Пример. Зададим цвет фона только для тех , значение атрибута которых в точности равно "submit" (для кнопки отправки формы):

Input { background: #0f0; }

Выбор по частичному значению атрибута

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

Синтаксис:

Element

Пример. Зададим обтекание для тех элементов , в перечне значений атрибута , которых присутствует "sideBar" (вот это-то и есть, фактически, ):

Div { float: left; }

Выбор по конкретным значениям атрибутов

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

Синтаксис:

Element

Пример. Зададим стили для всех элементов, язык которых задан в атрибутах, как английский (en, en-us, en-gb, en-au и т.д.):

{ /* какие-то стили */ }

Новые селекторы атрибутов в CSS3

CSS3 несколько расширяет возможности выбора по конкретным значениям атрибутов и дополняет их еще тремя вариантами.

Выбор по началу значения атрибута

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

Синтаксис:

Element

Пример. Зададим стили для всех элементов, атрибут которых начинается со слова "Hint":

{ /* какие-то стили */ }

Выбор по окончанию значения атрибута

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

Синтаксис:

Element

Пример. Зададим стили для всех элементов , которые ссылаются на гифки:

Img { /* какие-то стили */ }

Выбор по подстроке в значении атрибута

Выбираем все элементы, заданный атрибут которых содержит определенную подстроку.

Синтаксис:

Element

Пример. Зададим стили для всех ссылок, в адресах которых есть подстрока "сайт":

A { /* какие-то стили */ }

Это тоже главная