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

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

Селектор атрибутов — это мощный инструмент в CSS, который позволяет выбирать HTML-элементы на основе наличия определённого атрибута, его значения или даже части значения. Это значительно расширяет возможности стандартных селекторов по тегам, классам или ID, обеспечивая гибкость и точность при стилизации элементов, особенно когда нет возможности или желания добавлять дополнительные классы.

Основные виды селекторов атрибутов

1. Селектор наличия атрибута [attr]

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

/* Выбирает все input с атрибутом required */
input[required] {
    border-color: red;
}

2. Селектор точного совпадения значения [attr="value"]

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

/* Выбирает ссылки с конкретным адресом */
a[href="https://example.com"] {
    color: gold;
}

3. Селектор частичного совпадения значения [attr*="value"]

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

/* Выбирает все изображения, в src которых есть "logo" */
img[src*="logo"] {
    opacity: 0.8;
}

4. Селектор начала значения [attr^="value"]

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

/* Выбирает ссылки, начинающиеся с https */
a[href^="https"] {
    font-weight: bold;
}

5. Селектор конца значения [attr$="value"]

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

/* Выбирает ссылки на PDF-файлы */
a[href$=".pdf"]::after {
    content: " (PDF)";
}

6. Селектор значения в списке [attr~="value"]

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

/* Выбирает элементы с class, содержащим "button" */
[class~="button"] {
    padding: 10px 20px;
}

7. Селектор значения с дефисом [attr|="value"]

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

/* Выбирает элементы с lang, равным "en" или "en-US" */
[lang|="en"] {
    quotes: '"' '"';
}

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

Селекторы атрибутов особенно полезны в следующих сценариях:

• Стилизация форм: выделение обязательных полей, полей определённого типа (email, number).
• Работа со ссылками: разное оформление внешних, внутренних ссылок или ссылок на файлы.
• Интернационализация: стилизация элементов на основе атрибута lang.
• Доступность: визуальное обозначение элементов с ARIA-атрибутами.
• SEO и микроразметка: стилизация элементов с itemprop, data-* атрибутами.

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

<!-- HTML -->
<input type="email" required placeholder="Ваш email">
<a href="/docs/manual.pdf">Скачать PDF</a>
<div data-status="success">Операция завершена</div>

/* CSS */
/* Стили для всех обязательных полей */
input[required] {
    background-color: #fff9e6;
}

/* Ссылки на PDF-файлы */
a[href$=".pdf"] {
    background: url('pdf-icon.png') no-repeat left center;
    padding-left: 20px;
}

/* Элементы с определённым data-атрибутом */
[data-status="success"] {
    color: green;
    border-left: 3px solid green;
}

Особенности и советы

• Специфичность: Селекторы атрибутов имеют такую же специфичность, как классы и псевдоклассы (0,1,0).
• Производительность: Хотя современные браузеры хорошо оптимизированы, чрезмерно сложные селекторы атрибутов могут незначительно влиять на производительность.
• Читаемость: Не стоит злоупотреблять сложными селекторами атрибутов, если можно добавить понятный класс — код должен быть читаемым для других разработчиков.
• Поддержка: Селекторы атрибутов поддерживаются всеми современными браузерами, включая IE7+ (за исключением некоторых сложных случаев).

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