Штирлиц — Сеть печатных салонов в Перми

Весь комплекс печатных услуг в Перми. Общирная сеть печатных салонов в Перми. Цифровая печать, цветное и черно-белое копирование документов, сканирование документов, ризография в Перми

Css селектор по атрибуту: Селектор по атрибуту — CSS — Дока

Содержание

Атрибуты Селекторов — Учебник CSS — schoolsw3.com

❮ Назад Далее ❯

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

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

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

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

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

Пример

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

Попробуйте сами »

CSS Селектор [атрибут=»значение»]

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

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

Пример

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

Попробуйте сами »

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

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

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

Пример

[title~=»цветок»] {
    border: 5px solid yellow;
}

Попробуйте сами »

Пример выше будет соответствовать элементам с title="цветок", title="летний цветок", и title="цветок новый", но не title="мой-цвет" или title="цветы".

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

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

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

Примечание: Значение должно быть целым словом, либо в одиночным, как class="top", или через дефис -, как class="top-text"!

Пример

[class|=»top»] {
    background: yellow;
}

Попробуйте сами »

CSS Селектор [атрибут^=»значение»]

Селектор [attribute^="value"] используется для выбора элементов, атрибут значение, которые начинаются с указанного значения. =»top»] {
    background: yellow;
}

Попробуйте сами »

CSS Селектор [атрибут$=»значение»]

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

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

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

Пример

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

Попробуйте сами »

CSS Селектор [атрибут*=»значение»]

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

В следующем примере выбираются все элементы со значением атрибута класса, которые содержат "te":

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

Пример

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

Попробуйте сами »

Стиль формы

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

Пример

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 Упражнения

Проверьте себя с помощью упражнений

Упражнение:

Установите цвет фона на «красный» для элементов <a>, которые имеют атрибут target.


<style>
 {
  background-color: red;
}
</style>

<body>
  <a href="https://schools.com">schoolsw3.com</a>
  <a href="http://disney.com" target="_blank">Disney.com</a>
  <a href="http://wikipedia.org" target="_top">wikipedia.org</a>
</body>

Еще CSS примеры селекторов

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

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

❮ Назад Далее ❯


Селектор атрибута (с указанным значением)

CSS селекторы

Значение и применение

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

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

Селектор
Chrome
Firefox
Opera
Safari
IExplorer
Edge
[attribute = value]4.02.09.63.17.012.0

CSS синтаксис:

[attribute = value] {
блок объявлений;
}

Версия CSS

CSS2

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

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

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Селектор атрибута с указанным значением</title>
<style>
input[type=password] { /* выбираем все элементы <input>, атрибут type которых имеет значение password */
border: 1px dotted red; /* устанавливаем точечную границу размером 1 пиксель красного цвета */
} 

 input[type=password]:focus { /* выбираем элемент <input>, атрибут type которого имеет значение password и который находится в фокусе */
border: 1px solid green; /* устанавливаем сплошную границу размером 1 пиксель зеленого цвета */
} 
</style>
</head>
	<body>
		<form>
			Login: <input type = "text" name = "login" placeholder = "Введите ваш логин"><br><br>
			Password: <input type = "password" name = "password" placeholder = "Введите ваш пароль"><br><br>
			<input type = "submit" name = "submit" value = "Далее">
		</form>
	</body>
</html>

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

Результат нашего примера:

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

Рассмотрим следующий пример в котором поле для поиска будет растягиваться, благодаря использованию селектора атрибутов (с указанным значением) и универсального свойства transition, которое задает все свойства эффекта перехода в одном объявлении:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Выдвигающийся поиск на CSS</title>
<style> 
input[type=text] {
width : 20%; /* устанавливаем ширину элемента input  с указанным атрибутом и значением (type="text") */
transition : width 500ms ease-in-out; /* Для свойства width мы устанавливаем длительность эффекта перехода равную 500 ms, при этом эффект перехода начинается с медленного старта и заканчивается медленно (ease-in-out) */
}

 input[type=text]:focus {
width : 40%; /* устанавливаем ширину элемента input  с указанным атрибутом и значением (type="text") при получении фокуса */
}
</style>
</head>
	<body>
		Поиск: <input type = "text" name = "poisk" placeholder = "введите запрос">
	</body>
</html>
Выдвигающийся поиск на css (универсальное свойство transition и селектор атрибутов). CSS селекторы

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

❮ Предыдущий Справочник по селекторам CSS Далее ❯


Пример

Стиль элементов с target=»_blank»:

a[target=»_blank»] {
цвет фона: желтый;
}

Попробуйте сами »

Другие примеры «Попробуйте сами» ниже.

Определение и использование

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

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

Версия: CSS2

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

Цифры в таблице указывают первую версию браузера, которая полностью поддерживает селектор.

Селектор
[ атрибут = значение ] 4,0 7,0 2,0 3. 1 9,6

Синтаксис CSS

[ атрибут = значение ] {
  объявления css ;
} Демонстрация

Дополнительные примеры

Пример

Когда

получает фокус, постепенно меняйте ширину от 100 пикселей до 250 пикселей:

input[type=»text»] {
  ширина: 100 пикселей;
  переход: плавность входа-выхода, ширина 0,35 с плавного входа-выхода;
}

ввод[тип=»текст»]:фокус {
  ширина: 250 пикселей;
}

Попробуйте сами »

Связанные страницы

Учебник CSS: Селекторы атрибутов CSS

❮ Предыдущая Справочник по селекторам CSS Следующий ❯


ВЫБОР ЦВЕТА

Лучшие учебники
Учебник по HTML
Учебник по CSS
Учебник по JavaScript
Учебник How To
Учебник по SQL
Учебник по Python
Учебник по W3. CSS
Учебник по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery

Основные ссылки
Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Примеры HTML

Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

Copyright 1999-2023 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

Как и зачем использовать селекторы атрибутов в CSS

Селектор атрибутов CSS — это идеальный лайфхак, обеспечивающий эффективный способ стилизации HTML-элементов; в этой статье мы узнаем о селекторах атрибутов, расскажем, что они из себя представляют, где они необходимы и чем они отличаются от базовых селекторов CSS. Давайте начнем!

Перейти вперед:

9=»значение»] селектор
  • [атрибут$="значение"] селектор
  • [атрибут*="значение"] селектор
  • Базовые селекторы CSS и селекторы атрибутов CSS: демонстрация

    • Что такое селектор атрибутов?

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

    С помощью селекторов атрибутов вы можете эффективно стилизовать различные элементы на основе их соответствующих атрибутов. Например, Элемент div может иметь атрибут ID . Атрибут состоит из двух частей: имени и значения :

    .
     <идентификатор div="основной-контент">
  
    Это краткий пример атрибутов

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

     

  <голова>
    <метакодировка="UTF-8" />
    
    
    Селектор атрибутов CSS
    <тип стиля="текст/CSS">
      а [ссылка] {
        красный цвет;
      }
    
  
  <тело>
     
    Пример выбора атрибутов
     
    Список континентов
    <ул>
      
  •  europe.com">Европа
    • 
      
  • Азия
    • 
      
  • Африка
    • 
      
  • Северная Америка
    • 
      
  • Южная Америка
    • 
      
  • Австралия
    • 
      
  • Антарктида
    •

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

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

    Мы используем селектор [атрибут] для выбора элемента с указанным атрибутом. В следующем примере селектор [атрибут] выбирает все элементы с целью 9.0183 атрибут:

     а[цель="_blank"] {
  цвет фона: серый;
}

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

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

     [название = "список покупок"] {
  цвет фона: желтый;
}

    В приведенном выше примере [attribute="value"] выбирает все элементы с атрибутом title и значением атрибута 9. 0182 список покупок .

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

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

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

    .
     [название~="фрукты"] {
  граница: 7 пикселей сплошного желтого цвета;
}

    В приведенном выше примере будут сопоставляться элементы с title="фрукты" , title="апельсиновые фрукты" и title="корзина фруктов" , но не title="a-fruit" или title="фрукты" .

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

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

    Имейте в виду, что значение должно быть либо одним словом, например 9= «http»] { цвет: зеленый; }

    Имейте в виду, что указанное значение не обязательно должно быть целым словом.

    [атрибут$="значение"] селектор

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

    В приведенном ниже коде мы выбираем все теги с атрибутами href , значение которых заканчивается на 9.0182 .pdf :

     а[href$=".pdf"]{
  цвет : розовый;
}

    [атрибут*="значение"] селектор

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

     [класс*="комната"] {
  фон: желтый;
}

    Базовые селекторы CSS и селекторы атрибутов CSS

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

    Предположим, у нас есть следующий список ссылок, которые нам нужно оформить по категориям:

     <дел>
  Открыть сайт
  Частный сайт
  Мои документы
  Мои файлы XML

    Без селектора атрибутов мы немного ограничены в возможностях стилизации свойств каждого списка:

     корпус {
  дисплей: гибкий;
  выравнивание содержимого: по центру;
  выравнивание элементов: по центру;
  высота: 100вх;
  семейство шрифтов: без засечек;
}
.ссылки на {
  отступ: 15px 20px;
  поле: 0 20px;
  вес шрифта: полужирный;
  текстовое оформление: нет;
}

    селектора атрибутов CSS позволяют нам делать гораздо больше. Например, предположим, что мы хотим назначить все ссылки, которые имеют href 9="https"] { размер шрифта: 50px; }

    Ссылка с Частным сайтом — единственная ссылка с размером шрифта 50 пикселей, потому что это единственная ссылка с атрибутом href со значением, начинающимся с https :

    Чтобы добиться такого же стиля с помощью базовых селекторов CSS, процесс может занять немного больше времени. Во-первых, мы должны дать ссылке Private Site имя класса в качестве идентификатора, а затем стилизовать это имя класса. Таким образом, каждый раз, когда мы хотим добавить пользовательский размер шрифта к ссылке, используя базовые селекторы CSS, мы должны постоянно повторять имя конкретного класса в строке 9.0182 элемент . Разметка будет выглядеть следующим образом:

     Частный сайт

    CSS будет выглядеть следующим образом:

     a.increase-fontsize {
  размер шрифта: 50px;
}

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

     а[href$=".pdf"] {
  text-decoration-line: надчеркивание, подчеркивание;
  стиль оформления текста: волнистый;
}

    Теперь мы видим, что ссылка с расширением . pdf подчеркнута сверху и снизу волнистыми линиями:

    Опять же, чтобы достичь этого без использования селекторов атрибутов CSS, нам сначала нужно прикрепить идентификатор или имя класса к ссылкам, которые имеют расширение .pdf , а затем присвоить стили по нашему выбору имени класса или идентификатору. Разметка будет выглядеть следующим кодом:

     Мои документы

    При соответствующем стиле для класса код будет выглядеть следующим образом:

     a.pdf-файл {
  text-decoration-line: надчеркивание, подчеркивание;
  стиль оформления текста: волнистый;
}

    Заключение

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

    Более 200 000 разработчиков используют LogRocket для улучшения цифрового взаимодействия

    Узнать больше →

    Многие элементы HTML, такие как и , имеют различные атрибуты. Например, тег имеет такие атрибуты, как href и target , а тег также имеет такие атрибуты, как src и alt .

    Атрибуты, предоставляемые этими элементами, позволяют нам добавлять дополнительную информацию к данному элементу. Например, 9Атрибут 0182 alt в теге image указывает, что текст должен отображаться в случае, если изображение неправильно отображается в DOM.

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

    Я надеюсь, вам понравятся суперспособности CSS, и не стесняйтесь оставлять комментарии, если вы застряли. Удачного кодирования!

    Ваш интерфейс загружает ЦП ваших пользователей?

    Поскольку веб-интерфейсы становятся все более сложными, ресурсоемкие функции требуют от браузера все большего и большего.

    Оставить комментарий

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *