13. Атрибутные селекторы

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

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

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

Рассмотрим несколько примеров:

[attribute] - Выбирает все элементы с атрибутом attribute.
[attribute=value] - Выбирает все элементы с атрибутом attribute, значение которого равно value.
[attribute~=value] - Выбирает все элементы с атрибутом attribute, который содержит слово value (разделенное пробелами).
[attribute|=value] - Выбирает все элементы с атрибутом attribute, начинающимся с value или value-.
[attribute^=value] - Выбирает все элементы с атрибутом attribute, начинающимся с value.
[attribute$=value] - Выбирает все элементы с атрибутом attribute, заканчивающимся на value.
[attribute*=value] - Выбирает все элементы с атрибутом attribute, содержащим подстроку value.

Практические примеры кода

<!DOCTYPE html>
<html>
<head>
<title>Атрибутные селекторы</title>
<style>
/* Выбирает все элементы <a> с атрибутом target */
a[target] {
  color: red;
}

/* Выбирает все элементы <a> с атрибутом target="_blank" */
a[target="_blank"] {
  font-weight: bold;
}

/* Выбирает все элементы input с атрибутом type="text" */
input[type="text"] {
  border: 1px solid blue;
}

/* Выбирает все элементы с атрибутом title, содержащим слово "пример" */
[title~="пример"] {
    background-color: yellow;
}
</style>
</head>
<body>

<a href="#">Ссылка 1</a>
<a href="#" target="_blank">Ссылка 2 (откроется в новом окне)</a>
<a href="#" target="_self">Ссылка 3 (откроется в текущем окне)</a>

<br><br>

<input type="text" value="Текст">
<input type="password" value="Пароль">

<p title="Это просто пример текста.">Этот параграф подсвечен.</p>
<p title="Еще один пример, но другой.">И этот тоже.</p>
<p>А этот нет.</p>

</body>
</html>

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

Жизненный пример

Атрибутные селекторы широко используются в различных фреймворках и библиотеках для упрощения стилизации. Например, в Bootstrap атрибутные селекторы могут использоваться для стилизации кнопок на основе их типа:

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>

CSS (упрощенно):

/*  Упрощенный пример */
button[type="button"] {
  border: none;
  padding: 10px 20px;
  cursor: pointer;
}

.btn-primary {
  background-color: blue;
  color: white;
}

.btn-secondary {
  background-color: gray;
  color: white;
}

Также, атрибутные селекторы часто используются для стилизации элементов форм, особенно тех, которые создаются динамически на стороне клиента. Например, можно стилизовать все обязательные поля формы, используя input[required].

Ключевые моменты

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

13. Атрибутные селекторы

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

Практические примеры кода

Жизненный пример

Ключевые моменты

Интерактивный пример