Css selector tag by attribute

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

Селектор по атрибуту находит элемент на странице по значению либо по наличию атрибута.

Пример

Скопировать ссылку «Пример» Скопировано

   Октябрь уж наступил — уж роща отряхает Последние листы с нагих своих ветвей;  blockquote cite="А. С. Пушкин"> Октябрь уж наступил — уж роща отряхаетbr> Последние листы с нагих своих ветвей; blockquote>    Скопировать Скопировано Не удалось скопировать   

Селектор ниже найдёт все цитаты ( ) с атрибутом cite :

 blockquote[cite]  background-color: #2E9AFF; color: #000000;> blockquote[cite]  background-color: #2E9AFF; color: #000000; >    Скопировать Скопировано Не удалось скопировать   

Как пишется

Скопировать ссылку «Как пишется» Скопировано

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

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

[attr ]

Скопировать ссылку «[attr]» Скопировано

Селектор выберет все элементы, у которых присутствует атрибут attr .

 OK button disabled>OKbutton>    Скопировать Скопировано Не удалось скопировать   

 [disabled]  opacity: 0.5;> [disabled]  opacity: 0.5; >    Скопировать Скопировано Не удалось скопировать   

[attr = value ] или [attr = «value» ]

Скопировать ссылку «[attr=value] или [attr=»value»]» Скопировано

Селектор выберет все элементы, атрибут attr которых в точности равен value .

Если в значении атрибута есть пробелы или знаки, отличные от цифр и букв, то значение нужно указывать в кавычках. В остальных случаях кавычки не обязательны.

 Пустая ссылка Эта ссылка не стилизуется a href="#">Пустая ссылкаa> a href="#one">Эта ссылка не стилизуетсяa>    Скопировать Скопировано Не удалось скопировать   

 [href="#"]  color: red;> [href="#"]  color: red; >    Скопировать Скопировано Не удалось скопировать   

[attr ~ = value ]

Скопировать ссылку «[attr~=value]» Скопировано

Селектор выбирает все элементы, значение атрибута attr это перечень слов, разделённых пробелом, и среди этих слов есть такое, чьё значение равно value .

 
.
 
.
  blockquote cite="Александр Сергеевич Пушкин">. blockquote> blockquote cite="Лев Николаевич Толстой ">. blockquote>    Скопировать Скопировано Не удалось скопировать   

 [cite~="Пушкин"]  border: 1px solid green;> [cite~="Пушкин"]  border: 1px solid green; >    Скопировать Скопировано Не удалось скопировать   

[attr| = value ]

Скопировать ссылку «[attr|=value]» Скопировано

Селектор выберет все элементы, значение атрибута attr которых либо в точности равно value , либо начинается с value , за которым следует символ дефиса — (U+002D). Подобный вариант селектора чаще всего используется для выбора по коду языка (например en — U S или en — G B ).

 
Hello World!
世界您好！
世界您好！ div lang="en-us en-gb en-au en-nz">Hello World!div> div lang="zh-CN">世界您好！div> div lang="zh-TW">世界您好！div>    Скопировать Скопировано Не удалось скопировать   

 [lang|="en"]  color: blue;> [lang|="en"]  color: blue; >    Скопировать Скопировано Не удалось скопировать   

 [lang|="zh"]  color: red;> [lang|="zh"]  color: red; >    Скопировать Скопировано Не удалось скопировать   

[attr^ = value ]

Скопировать ссылку «[attr^=value]» Скопировано

Селектор выберет все элементы, значение атрибута attr которых начинается с value .

 Ссылка по протоколу HTTPSСсылка по протоколу HTTP a href="https://secure.com/">Ссылка по протоколу HTTPSa> a href="http://secure.com/">Ссылка по протоколу HTTPa>    Скопировать Скопировано Не удалось скопировать   

У ссылок по протоколу HTTPS справа отображается замок:

 [href^="https"]::after  content: "🔐"; margin-left: 3px;> [href^="https"]::after  content: "🔐"; margin-left: 3px; >    Скопировать Скопировано Не удалось скопировать   

[attr$ = value ]

Скопировать ссылку «[attr$=value]» Скопировано

Селектор выберет все элементы, значение атрибута attr которых оканчивается на value .

 Apple USApple RussiaApple Italy a href="https://apple.com/">Apple USa> a href="https://apple.com/ru">Apple Russiaa> a href="https://apple.com/it">Apple Italya>    Скопировать Скопировано Не удалось скопировать   

 a::after  content: "🇺🇸";>a[href$="/ru"]::after  content: "🇷🇺";>a[href$="/it"]::after  content: "🇮🇹";> a::after  content: "🇺🇸"; > a[href$="/ru"]::after  content: "🇷🇺"; > a[href$="/it"]::after  content: "🇮🇹"; >    Скопировать Скопировано Не удалось скопировать   

[attr* = value ]

Скопировать ссылку «[attr*=value]» Скопировано

Селектор выберет все элементы, атрибут attr которых содержит в себе значение value .

  img src="/img/myadvertisingbanner.png"> img src="/img/other-advert-banner.png"> img src="/img/Advert-image.png">    Скопировать Скопировано Не удалось скопировать   

Спрячет две первых рекламных картинки. Оба изображения в атрибуте src содержат подстроку advert.

 img[src*="advert"]  display: none;> img[src*="advert"]  display: none; >    Скопировать Скопировано Не удалось скопировать   

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

[attr operator value i ]

Скопировать ссылку «[attr operator value i]» Скопировано

Если добавить в скобки после значения атрибута i или I , то браузер будет игнорировать регистр символов.

  img src="/img/myadvertisingbanner.png"> img src="/img/other-advert-banner.png"> img src="/img/Advert-image.png">    Скопировать Скопировано Не удалось скопировать   

Теперь будут спрятаны все три картинки

 img[src*="advert" i]  display: none;> img[src*="advert" i]  display: none; >    Скопировать Скопировано Не удалось скопировать   

На практике

Скопировать ссылку «На практике» Скопировано

Денис Ежков советует

Скопировать ссылку «Денис Ежков советует» Скопировано

🛠 При помощи селектора по атрибуту круто стилизовать ссылки, основываясь на значении атрибута href . Можно визуально разделять ссылки, ведущие на соседние страницы сайта, и ссылки, ведущие на другие сайты:

 О насДоставкаКонтактыМы на Medium a href="http://mysite.ru/about">О насa> a href="http://mysite.ru/delivery">Доставкаa> a href="http://mysite.ru/contacts">Контактыa> a href="http://medium.com/mysite-blog">Мы на Mediuma>    Скопировать Скопировано Не удалось скопировать   

Все ссылки будут с иконкой стрелочки:

 [href^="http"]::after  content: ''; display: inline-block; background-image: url(arrow-top-right.svg);> [href^="http"]::after  content: ''; display: inline-block; background-image: url(arrow-top-right.svg); >    Скопировать Скопировано Не удалось скопировать   

Внутренние ссылки — без иконок:

 [href*="/mysite.ru/"]::after  display: none;> [href*="/mysite.ru/"]::after  display: none; >    Скопировать Скопировано Не удалось скопировать   

Источник

CSS Attribute Selectors

It is possible to style HTML elements that have specific attributes or attribute values.

CSS [attribute] Selector

The [attribute] selector is used to select elements with a specified attribute.

The following example selects all elements with a target attribute:

Example

CSS [attribute=»value»] Selector

The [attribute=»value»] selector is used to select elements with a specified attribute and value.

Example

CSS [attribute~=»value»] Selector

The [attribute~=»value»] selector is used to select elements with an attribute value containing a specified word.

The following example selects all elements with a title attribute that contains a space-separated list of words, one of which is «flower»:

Example

The example above will match elements with title=»flower», title=»summer flower», and title=»flower new», but not title=»my-flower» or title=»flowers».

CSS [attribute|=»value»] Selector

The [attribute|=»value»] selector is used to select elements with the specified attribute, whose value can be exactly the specified value, or the specified value followed by a hyphen (-).

Note: The value has to be a whole word, either alone, like class=»top», or followed by a hyphen( — ), like >

Example

CSS [attribute^=»value»] Selector

The [attribute^=»value»] selector is used to select elements with the specified attribute, whose value starts with the specified value.

The following example selects all elements with a class attribute value that starts with «top»:

Note: The value does not have to be a whole word!

Example

CSS [attribute$=»value»] Selector

The [attribute$=»value»] selector is used to select elements whose attribute value ends with a specified value.

The following example selects all elements with a class attribute value that ends with «test»:

Note: The value does not have to be a whole word!

Example

CSS [attribute*=»value»] Selector

The [attribute*=»value»] selector is used to select elements whose attribute value contains a specified value.

The following example selects all elements with a class attribute value that contains «te»:

Note: The value does not have to be a whole word!

Example

Styling Forms

The attribute selectors can be useful for styling forms without class or ID:

Example

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

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

Tip: Visit our CSS Forms Tutorial for more examples on how to style forms with CSS.

All CSS Attribute Selectors

Selector	Example	Example description
[attribute]	[target]	Selects all elements with a target attribute
[attribute=value]	[target=»_blank»]	Selects all elements with target=»_blank»
[attribute~=value]	[title~=»flower»]	Selects all elements with a title attribute containing the word «flower»
[attribute|=value]	[lang|=»en»]	Selects all elements with a lang attribute value starting with «en»
[attribute^=value]	a[href^=»https»]	Selects every element whose href attribute value begins with «https»
[attribute$=value]	a[href$=».pdf»]	Selects every element whose href attribute value ends with «.pdf»
[attribute*=value]	a[href*=»w3schools»]	Selects every element whose href attribute value contains the substring «w3schools»

Источник