Селектор по атрибуту css: 🤷🏽‍♀️ Page not found | MDN Web Docs

Содержание

Селекторы атрибута — Изучение веб-разработки

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

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

Селектор Пример Описание
[attr] a[title] Выбирает элементы с атрибутом attr (имя которого — это значение в квадратных скобках).
[attr=value] a[href="https://example.com"] Выбирает элементы с атрибутом attr, значение которого в точности равно
value
— строке внутри кавычек.
[attr~=value] p[class~="special"]

Выбирает элементы с атрибутом attr, значение которого в точности равно value или содержит value в своём (разделённом пробелами) списке значений.

[attr|=value] div[lang|="zh"] Выбирает элементы с атрибутом attr, значение которого в точности равно value или начинается с value, за которым сразу следует дефис.

В приведённом ниже примере вы можете увидеть использование этих селекторов.

  • Используя li[class], мы можем выбрать каждый селектор с атрибутом класса. Это соответствует всем пунктам списка, за исключением первого.
  • li[class="a"] выбирает селектор с классом
    a
    , но не селектор с классом a в сочетании с другим, отделённым запятой, классом как частью значения.=»a»] выбирает все значения атрибута, которые начинаются с a, что соответствует первым двум элементам списка.
  • li[class$="a"] выбирает все значения атрибута, которые заканчиваются на a, что соответствует первому и третьему элементу списка.
  • li[class*="a"] выбирает все значения атрибута, где появляется a, независимо от положения в строке, что соответствует всем элементам нашего списка.

Если вы хотите выбрать значения атрибута без учёта регистра, вы можете использовать значение i перед закрывающей скобкой. Этот признак говорит браузеру, что символы ASCII должны сопоставляться без учёта регистра. Без этого признака значения будут сопоставлены в соответствии с чувствительностью к регистру языка документа — в случае HTML такая чувствительность присутствует.

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

Примечание: Существует также более новое значение s, которое вызывает сопоставление с учётом регистра в контекстах, где сопоставление обычно не учитывает регистр, однако это не так хорошо поддерживается в браузерах и не очень полезно в контексте HTML.

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

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

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


<h3 rel="friend">David Walsh</h3>

У этого элемента три атрибута: id, class и rel. Обратиться к этому элементу в CSS вы можете либо по его идентификатору (#first-title), либо по имени класса (.magical). Однако знали ли вы, что вы также можете обратиться к нему, используя атрибут rel? Это и называется селекторы по атрибутам:


h3[rel=friend] {
	/* woohoo! */
}

Существует множество вариантов их использования. Давайте разберёмся более детально с различными опциями и попытаемся придумать сценарии использования атрибутов в реальной жизни.

[rel=external]

Атрибут точно соответствует заданному значению

В приведённом выше примере, атрибут элемента h3 был равен «friend». Селектор, который мы написали ссылался на него, поскольку значение атрибута точно равно «friend». Именно точное. Давайте посмотрим на другой пример:


<h2 rel="external">Attribute Equals</h2>

h2[rel=external] { color: red; }

Более реальный пример — стилизация блогролла (blogroll). Скажем у вас есть список ссылок на дружественные сайты:


<a href="http://perishablepress.com">Jeff Starr</a>
<a href="http://davidwalsh.name">David Walsh</a>
<a href="http://accidentalninja.net/">Richard Felix</a>

И вы хотите задать каждой ссылке свой стиль. Традиционный подход состоит в том, что каждой ссылке указывается класс, но этот подход требует дополнительной разметки. Другой способ — это использование псевдоселектора nth-child. Однако этот подход требует определённого порядка элементов. Эта проблема идеально подходит для применения селекторов по атрибутам, поскольку ссылки уже являются уникальными.


a[href=http://perishablepress.com] { color: red; }

Я уверен, что наиболее часто этот тип селектора используется для элементов input (text, radio и т.п.). Все эти элементы сильно отличаются друг от друга, и писать что-нибудь типа input { padding: 10px; } в большинстве случаев не лучшая идея. Гораздо чаще используется следующая запись:


input[type=text] { padding: 3px; }
input[type=radio] { float: left; }

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

[rel*=external]

Атрибут содержит заданное значение.

Теперь начинаются более интересные вещи. Знаку равенства в селекторе по атрибуту может предшествовать другой знак, который меняет назначение его использования.=http://perishablepress.com] { color: red; }

[rel$=external]

Атрибут заканчивается на заданное значение

Если есть возможность сделать выбор по началу значения атрибута, то почему не быть и обратной возможности?


<h2 rel="friend external">Attribute Ends</h2>

h2[rel$=external] { color: red; }

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


a[href$=#], a[href$=?] { color: red; }
[rel~=external]

Атрибут находится в списке, разделённом пробелами

Как вы уже знаете, вы можете указать несколько классов стилей для одного элемента. И если вы делаете именно так, то вы можете использовать имя класса для доступа к элементу в CSS. В случае использования селекторов по атрибуту, не всё так просто. Если атрибуту rel присвоено несколько значений (разделённых пробелами), то вам необходимо использовать «~=»;


<h2 rel="friend external sandwich">Attribute Space Separated</h2>

h2[rel~=external] { color: red; }

Вы можете подумать, почему бы нам не использовать в этом случае «*=» ? Действительно, такой вариант использования более гибок, однако он может быть слишком гибок. Рассматриваемый селектор требует, чтобы значение отделялось пробелом, а «*=» — нет. Таким образом, если у вас есть два элемента (один с rel=home friend-link, а второй с rel=home friend link), то вам необходимо использовать селектор для случая с пробелами, чтобы выбрать только второй элемент.

[rel|=external]

Атрибут находится в списке, разделённом дефисами

Список, разделённый дефисами очень похож на описанный выше список разделённый пробелами. Но опять же есть свои особенности перед использованием селектора с «*=».=Important] { color: red; }

Поддержка браузерами

Каждый пример, приведённый выше, работает во всех современных браузерах: Safari, Chrome, Firefox, Opera и IE7 и выше.

CSS. Селектор по атрибуту id.

Еще один способ, как можно выбрать элемент на веб-странице для применения к нему стилей CSS — это использовать так называемый селектор id или по идентификатору

Как это работает?

Предположим у нас на веб-странице есть какой-ли элемент, у которого есть атрибут id со значением, предположим, test.

<ul>
<li>Элемент 1</li>
<li>Элемент 2</li>
</ul>

Каким образом мы можем применить стили CSS только к тому элементу, который имеет атрибут id со значением test?

Для этого в CSS используется специальный символ решетка «#», далее указывается то значение атрибута id, к которому нужно применить стили и далее указываются  стили, которые должны быть применены к этому элементу.

#test {
color:blue;
}

Особенность атрибута id в том, что мы не можем применять несколько атрибутов id с одним и тем же значением в пределах одной страницы. Атрибут id — это уникальный идентификатор. Для того, чтобы не возникало каких-либо ошибок, у нас в пределах одной веб-страницы не должно быть двух и более элементов с одинаковым значением атрибута id.

Для стилей CSS одинаковые значения атрибутов id особого значения может не иметь, но для Javascript скриптов — это может критично и программа может завершиться с ошибкой.

Таким образом вы можете выбирать элементы по их идентификатору и применять к ним стили CSS, т.е. те стили оформления, которые вы хотели бы у них видеть.

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

Attribute CSS уроки для начинающих академия



Стили HTML-элементов с определенными атрибутами

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


Селектор CSS [атрибут]

Селектор [attribute] используется для выбора элементов с указанным атрибутом.

В следующем примере выбираются все элементы <a> с целевым атрибутом:

Пример

a[target] {
    background-color: yellow;
}


CSS [attribute=»value»] Селектор

Селектор [attribute="value"] используется для выбора элементов с указанным атрибутом и значением.

В следующем примере выбираются все элементы < a > с целевым атрибутом = «_бланк»:

Пример

a[target=»_blank»] {
    background-color: yellow;
}


Селектор CSS [атрибут ~ = «value»]

Селектор [attribute~="value"] используется для выбора элементов со значением атрибута, содержащим указанное слово.

В следующем примере выбираются все элементы с атрибутом title, содержащим разделенный пробелами список слов, одним из которых является «цветок»:

Пример

[title~=»flower»] {
    border: 5px solid yellow;
}

Приведенный выше пример будет соответствовать элементам с названием = «цветок», название = «Летний цветок», и название = «цветок новый», но не название = «Мой-цветок» или название = «Цветы».=»top»] {
    background: yellow;
}


Селектор CSS [атрибут $ = «value»]

Селектор [attribute$="value"] используется для выбора элементов, значение атрибута которых заканчивается заданным значением.

В следующем примере выбираются все элементы со значением атрибута Class, которое заканчивается на «Test»:

Примечание: Значение не обязательно должно быть целым словом!

Пример

[class$=»test»] {
    background: yellow;
}


Селектор CSS [атрибут * = «value»]

Селектор [attribute*="value"] используется для выбора элементов, значение атрибута которых содержит указанное значение.

В следующем примере выбираются все элементы со значением атрибута Class, содержащим «Te»:

Примечание: Значение не обязательно должно быть целым словом!

Пример

[class*=»te»] {
    background: yellow;
}


Укладка форм

Селекторы атрибутов могут быть полезны для стилизации форм без класса или идентификатора:

Пример

input[type=»text»] {
    width: 150px;
    display: block;
    margin-bottom: 10px;
    background-color: yellow;
}

input[type=»button»] {
    width: 120px;
    margin-left: 35px;
    display: block;
}

Совет: Посетите наш учебник по формам CSS для получения дополнительных примеров по стилю форм с помощью CSS.



Другие примеры селекторов CSS

Используйте наш Тестер селекторов CSS для демонстрации различных селекторов.

Для полной ссылки на все селекторы CSS, пожалуйста, перейдите к нашей CSS селекторы ссылка.


[атрибут~=значение] | CSS селектор

Поддержка браузерами

12.0+ 7.0+ 2.0+ 4.0+ 9.6+ 3.1+

Описание

Атрибут, который содержит список значений, разделенных пробелами, допускает выбор на основании любого из этих значений. В качестве примера можно рассмотреть атрибут class, способный принимать в качестве значения сразу несколько слов (названий классов):

&ltp>Пример селектора выбора по частичному значению атрибута.&lt/p>

Допустим, требуется выбрать только те элементы, атрибут class которых содержит в значении слово alert. Это возможно сделать посредством селектора атрибутов:

p[class~="alert"] { font-size: 150%; }

В примере стоит обратить внимание на наличие значка тильды(~). Тильда в данном селекторе является ключом для осуществления выбора элемента на основании наличия в значении атрибута нужного слова, отделенного пробелом. Если тильда будет пропущена, то получится требование к точному значению, которое выберет только элементы, где значении атрибута class содержится только слово alert.

Пример:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Пример</title>
    <style>
      [alt~=flower] { border: 5px double red; }
    </style>
  </head>

  <body>

    <p>Картинка с атрибутом alt, содержащим слово "flower", будет иметь красную рамку.</p>
    <p> 
      <img src="klematis.jpg" alt="klematis flower">
      <img src="img_flwr.gif" alt="flowers">
      <img src="landscape.jpg" alt="landscape">
    </p>

  </body>
</html>
Результат данного примера

Картинка с атрибутом alt, содержащим слово «flower», будет иметь красную рамку.

Селекторы атрибутов. HTML, XHTML и CSS на 100%

Читайте также

7.3. Селекторы

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

Селекторы потомков

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

Сестринские селекторы

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

Селекторы классов

Селекторы классов В таблицах стилей, используемых с HTML-документами, при сопоставлении атрибуту class вы можете использовать точку (.) как альтернативу условному обозначению ~=. Таким образом, два выражения HTML DIV. value и DIV [class ~=value] имеют одинаковый смысл. Значение атрибута

ID-селекторы

ID-селекторы Атрибут ID языка документа позволяет назначать идентификатор одному экземпляру элемента в дереве HTML-документа. В CSS ID-селекторы сопоставляются экземпляру элемента в зависимости от его идентификатора. В CSS ID-селектор содержит символ #, непосредственно за

Селекторы столбцов

Селекторы столбцов В CSS ячейки таблицы могут принадлежать одному из двух типов групп: строкам или столбцам. В HTML ячейки являются наследующими элементами строк, а не столбцов. Тем не менее на некоторые свойства ячеек оказывают влияние свойства столбцов.Ниже приведен

ГЛАВА 13. Специальные селекторы 

ГЛАВА 13. Специальные селекторы  В предыдущих главах части II мы изучали, в основном, атрибуты стилей CSS. Их очень много; одни задают параметры шрифта, другие — параметры фона, третьи — параметры отступов и пр. Можно сказать, что нет такого параметра, влияющего на

Селекторы по атрибутам тега

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

Специальные селекторы CSS, предназначенные для работы с элементами управления

Специальные селекторы CSS, предназначенные для работы с элементами управления Язык CSS предоставляет несколько специальных селекторов, с помощью которых можно неявно привязать стиль к элементам управления на основе их состояния. Все они относятся к структурным

ГЛАВА 13. Специальные селекторы

ГЛАВА 13. Специальные селекторы В предыдущих главах части II мы изучали, в основном, атрибуты стилей CSS. Их очень много; одни задают параметры шрифта, другие — параметры фона, третьи — параметры отступов и пр. Можно сказать, что нет такого параметра, влияющего на

Селекторы по атрибутам тега

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

Специальные селекторы CSS, предназначенные для работы с элементами управления

Специальные селекторы CSS, предназначенные для работы с элементами управления Язык CSS предоставляет несколько специальных селекторов, с помощью которых можно неявно привязать стиль к элементам управления на основе их состояния. Все они относятся к структурным

1.3. Установка атрибутов

1.3. Установка атрибутов Для того чтобы ваша схема последовательной цепи точно соответствовала образцу на рис. 1.5, нужно дать сопротивлениям и источнику напряжения необходимые имена и указать их характеристики. При работе с редактором SCHEMATICS имена, значения и другие

Потребители атрибутов

Потребители атрибутов Как вы можете догадаться, в комплекте с .NET Framework 2.0 SDK поставляется множество утилит, предназначенных для работы с различными атрибутами. Даже компилятор C# (csc.exe) запрограммирован на проверку определенных атрибутов в процессе компиляции. Например,

7. Унификация атрибутов

7. Унификация атрибутов Если при миграции первичных ключей некоего родительского класса сущностей в один и тот же дочерний класс попадают совпадающие по смыслу атрибуты из разных родительских классов, то эти атрибуты необходимо «слить», т. е. необходимо провести так

Селекторы по атрибутам тега. HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов

Селекторы по атрибутам тега

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

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

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

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

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

Пример:

TD[ROWSPAN] { background-color: grey }

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

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

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

Пример:

TD[ROWSPAN=2] { background-color: grey }

Данный стиль будет привязан к ячейкам таблицы, теги которых имеют атрибут ROWSPAN со значением 2, т.=http://www.pictures.ru] { margin: 5px }

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

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

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

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

Пример:

IMG[SRC$=gif] { margin: 10px }

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

формата GIF.

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

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

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

Пример:

IMG[SRC*=/picts/] { margin: 10px }

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

Данный текст является ознакомительным фрагментом.

Продолжение на ЛитРес

[атрибут] | CSS-уловки

Есть много способов выбора элементов в CSS. Самый простой выбор осуществляется по имени тега, например p {} . Почти все, что более специфично, чем селектор тегов, использует атрибуты — class и ID оба выбирают эти атрибуты в элементах HTML. Но class и ID — не единственные атрибуты, которые могут выбрать разработчики. Мы можем использовать любых атрибутов элемента в качестве селекторов.

Выбор атрибута имеет особый синтаксис.Вот пример:

  a [href = "https://css-tricks.com"] {
  цвет: # E18728;
}  

Это селектор с точным соответствием , который будет выбирать только ссылки с точным значением атрибута href для «https://css-tricks.com».

Семь различных типов

Селекторы атрибутов по умолчанию чувствительны к регистру (см. Сопоставление без учета регистра ниже) и записываются внутри скобок [] .

Существует семь различных типов совпадений, которые можно найти с помощью селектора атрибутов, и для каждого из них используется свой синтаксис.Каждый из более сложных селекторов атрибутов основан на синтаксисе селектора точного соответствия — все они начинаются с имени атрибута и заканчиваются знаком равенства, за которым следует значение (я) атрибута, обычно в кавычках. То, что находится между именем атрибута и знаком равенства, и есть разница между селекторами. = «foo»] { / * Значение атрибута начинается с этого * / } [значение-данных | = «foo»] { / * Значение атрибута начинается с этого в списке, разделенном тире * / } [data-value $ = «foo»] { / * Значение атрибута заканчивается этим * / }

Значение содержит: значение атрибута содержит термин как единственное значение, значение в списке значений или как часть другого значения.Чтобы использовать этот селектор, добавьте звездочку (*) перед знаком равенства. Например, img [alt * = "art"] выберет изображения с альтернативным текстом «abstract art » и «спортсмен , начинающий новый вид спорта», потому что значение «art» находится в слове «start». ».

Значение в списке, разделенном пробелами: значение является либо единственным значением атрибута, либо целым значением в наборе значений, разделенных пробелами. В отличие от селектора «содержит», этот селектор не будет искать значение как фрагмент слова.= «Искусство»] выберет изображения с альтернативным текстом «арт-шоу» и «художественный узор», но не изображения с альтернативным текстом «Артур Миллер», потому что «Артур» начинается с заглавной буквы.

Значение стоит первым в списке, разделенном тире: Этот селектор очень похож на селектор «начинается с». Здесь селектор соответствует значению, которое является либо единственным значением, либо первым в списке значений, разделенных тире. Чтобы использовать этот селектор, добавьте вертикальную черту (|) перед знаком равенства.Например, li [data-years | = "1900"] выберет элементы списка со значением data-years , равным «1900-2000», но не элемент списка со значением data-years , равным « 1800-1900 ».

Значение заканчивается на: значение атрибута заканчивается выбранным термином. Чтобы использовать этот селектор, добавьте знак доллара ($) перед знаком равенства. Например, a [href $ = "pdf"] выбирает каждую ссылку, которая заканчивается на .pdf.

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

См. Селекторы атрибутов пера от CSS-Tricks (@ css-tricks) на CodePen.

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

  [class = "(╯ ° □ °) ╯︵ ┻━┻"] {
  красный цвет;
  font-weight: жирный;
}  

Сопоставление без учета регистра

Селекторы атрибутов без учета регистра являются частью спецификации уровня 4 селекторов рабочей группы CSS.Как упоминалось выше, строки значений атрибутов по умолчанию чувствительны к регистру, но их можно изменить на нечувствительность к регистру, добавив i непосредственно перед закрывающей скобкой:

  [attribute = "value" i] {
  / * Стили здесь будут применяться к элементам с:
    attribute = "значение"
    attribute = "VaLuE"
    attribute = "VALUE"
    ...так далее
  * /
}  

Сопоставление без учета регистра может быть действительно удобным для нацеливания на атрибуты, содержащие непредсказуемый, написанный человеком текст.Например, предположим, что вы создавали речевой пузырь в приложении чата и хотели добавить «машущую руку» к любым сообщениям с текстом «привет» в той или иной форме. Вы можете сделать это только с помощью CSS, используя сопоставление без учета регистра, чтобы уловить все возможные варианты:

См. Сопоставление атрибутов CSS без учета регистра в ручке с помощью CSS-Tricks (@ css-tricks) на CodePen.

Объединяя их

Вы можете комбинировать селектор атрибутов с другими селекторами, такими как тег, класс или идентификатор.

  div [attribute = "value"] {
  / * здесь правила стиля * /
}

.модуль [атрибут = "значение"] {
  / * здесь правила стиля * /
}

#header [attribute = "value"] {
  / * здесь правила стиля * /
}  

Или даже комбинируйте несколько селекторов атрибутов. В этом примере выбираются изображения с замещающим текстом, который включает слово «человек» в качестве единственного значения или значение в списке, разделенном пробелами, и — значение src , которое включает значение «lorem»:

  img [alt ~ = "person"] [src * = "lorem"] {
  / * здесь правила стиля * /
}  

См. Комбинированные атрибуты пера и выбор только атрибутов с помощью CSS-Tricks (@ css-tricks) на CodePen.

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

Селекторы атрибутов могут использоваться в jQuery, как и любой другой селектор CSS. В JavaScript вы можете использовать селекторы атрибутов с document.querySelector () и document.querySelectorAll () .

См. Селекторы атрибутов пера в JS и jQuery от CSS-Tricks (@ css-tricks) на CodePen.

Связанные

Дополнительная информация

Поддержка браузера

Хром Safari Firefox Opera IE Android iOS
Любая Любые Любая Любые 7+ Любая Любые

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

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

Что такое атрибуты?

Все элементы HTML могут иметь связанные свойства, называемые атрибутами.У этих атрибутов обычно есть значения. В теге элемента можно использовать любое количество пар атрибут / значение — при условии, что они разделены пробелами. Они могут появляться в любом порядке.

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

id = " section1 ">
src = " small.gif " width = " 100 " height = " 100 ">
title = " mainimage " alt = " main image ">
href = " foo.htm ">

class =" maintext ">

style =" padding: 10px ">

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

Селекторы атрибутов используются для выбора элементов на основе их атрибутов или значения атрибута. Например, вы можете выбрать любое изображение на странице HTML, которое называется small.gif. Это можно сделать с помощью правила ниже, которое будет нацеливаться только на изображения с выбранным именем:

img [src = "small.gif "] {border: 1px solid # 000;}

Есть четыре типа селекторов атрибутов.

Первый вариант — выбрать на основе атрибута . В приведенном ниже примере будет выбран элемент (в данном случае «img») с соответствующим атрибутом. Примеры могут включать:

img [название] {граница: 1px solid # 000; }
img [ширина] {граница: 1px solid # 000; }
img [alt] {граница: 1px solid # 000; }

Второй вариант — выбрать на основе значение .В приведенном ниже примере будет выбрано любое изображение, атрибут которого (в данном случае «src») имеет значение «small.gif».

img [src = "small.gif"] {border: 1px solid # 000; }

Третий метод выберет экземпляра значения , разделенных пробелами. В приведенном ниже примере будет выбрано любое изображение, атрибут которого (в данном случае «alt») содержит список слов, разделенных пробелами — в данном случае любой «alt», который включает слово «small».

img [alt ~ = "small"] {border: 1px solid # 000; }

Четвертый метод выберет экземпляра значения , разделенных дефисом.В приведенном ниже примере будет выбрано любое изображение, атрибут которого (в данном случае «title») содержит список, разделенный дефисом — в данном случае любой заголовок, который включает «small-«.

img [title | = "small"] {border: 1px solid # 000; }

Селекторы атрибутов не поддерживаются в Windows Internet Explorer 5, 5.5 и 6 или Macintosh Internet Explorer 5. Они также не поддерживаются более ранними версиями Opera.

Дальнейшая информация

Псевдо-классы »

Другие статьи и презентации Max Design
, связанные с webstandardsgroup.org

Селектор атрибутов CSS. Полное руководство

Селекторы

CSS позволяют веб-разработчикам применять стили к определенному элементу или набору элементов на веб-странице.

Найди свой матч на тренировочном лагере