Дмитрий Нечаев
Селектор по атрибуту в CSS; Полное руководство с примерами
29 августа 2024 г.Автор
Селекторы по атрибуту в CSS позволяют выбирать элементы на странице на основе наличия и значений их атрибутов. Это мощный инструмент для стилизации, который помогает разработчикам более точно управлять внешним видом элементов. В этой статье мы подробно рассмотрим, как работают селекторы по атрибуту, их типы и приведем примеры использования для различных ситуаций.
Что такое селектор по атрибуту?
Селектор по атрибуту позволяет выбирать элементы, имеющие определённый атрибут или атрибут с конкретным значением. Синтаксис селектора по атрибуту заключается в использовании квадратных скобок [], внутри которых указывается атрибут и, опционально, его значение.
Пример базового селектора по атрибуту:
[attribute] {
/* Стили для всех элементов с указанным атрибутом */
}Пример селектора по атрибуту с конкретным значением:
[attribute="value"] {
/* Стили для всех элементов с указанным атрибутом и значением */
}Типы селекторов по атрибуту
Наличие атрибута
Этот селектор выбирает все элементы, которые имеют указанный атрибут, независимо от его значения.
Пример:
[input] {
border: 1px solid #ccc;
}В этом примере будут выбраны все элементы с атрибутом input.
Точное значение атрибута
Этот селектор выбирает элементы, у которых атрибут имеет указанное точное значение.
Пример:
[type="text"] {
background-color: #f0f0f0;
}В этом примере будут выбраны все элементы, у которых атрибут type имеет значение text.
Значение атрибута, начинающееся с определённой строки
Этот селектор выбирает элементы, у которых значение атрибута начинается с указанной строки. Используется символ ^=.
Пример:
[href^="https"] {
color: green;
}В этом примере будут выбраны все ссылки (<a>), у которых атрибут href начинается с https.
Значение атрибута, заканчивающееся на определённую строку
Этот селектор выбирает элементы, у которых значение атрибута заканчивается на указанную строку. Используется символ $=.
Пример:
[src$=".jpg"] {
border: 2px solid red;
}В этом примере будут выбраны все изображения (<img>), у которых атрибут src заканчивается на .jpg.
Значение атрибута, содержащие определённую строку
Этот селектор выбирает элементы, у которых значение атрибута содержит указанную строку. Используется символ *=.
Пример:
[class*="button"] {
padding: 10px 20px;
background-color: blue;
color: white;
}В этом примере будут выбраны все элементы, у которых атрибут class содержит строку button.
Значение атрибута, равное одному из слов в списке
Этот селектор выбирает элементы, у которых значение атрибута совпадает с одним из слов в списке. Используется символ ~=.
Пример:
[title~="flower"] {
color: pink;
}В этом примере будут выбраны все элементы, у которых атрибут title содержит слово flower.
Значение атрибута, начинающееся с определённого префикса
Этот селектор выбирает элементы, у которых значение атрибута начинается с указанного префикса и за ним следует дефис. Используется символ |=.
Пример:
[lang|="en"] {
font-style: italic;
}В этом примере будут выбраны все элементы, у которых атрибут lang имеет значение en или начинается с en-, например, en-US.
Примеры использования селекторов по атрибуту
Стилизация форм
Селекторы по атрибуту можно использовать для стилизации различных элементов форм.
Пример:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
input[type="text"] {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
}
input[type="submit"] {
background-color: blue;
color: white;
padding: 10px 20px;
border: none;
cursor: pointer;
}
</style>
<title>Стилизация форм</title>
</head>
<body>
<form>
<label for="name">Имя:</label>
<input type="text" id="name" name="name">
<input type="submit" value="Отправить">
</form>
</body>
</html>Стилизация ссылок
Селекторы по атрибуту могут быть полезны для стилизации ссылок, исходя из их URL.
Пример:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
a[href^="https"] {
color: green;
}
a[href$=".pdf"] {
color: red;
}
</style>
<title>Стилизация ссылок</title>
</head>
<body>
<a href="<https://example.com>">Безопасная ссылка</a>
<a href="document.pdf">Ссылка на PDF</a>
</body>
</html>Стилизация элементов с определённым классом
Пример:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
[class*="highlight"] {
background-color: yellow;
}
</style>
<title>Стилизация элементов с определённым классом</title>
</head>
<body>
<p class="highlight-text">Этот текст будет выделен жёлтым фоном.</p>
<p class="highlight">Этот текст также будет выделен жёлтым фоном.</p>
</body>
</html>Заключение
Селекторы по атрибуту в CSS являются мощным инструментом для точного выбора и стилизации элементов на странице. Они позволяют выбирать элементы на основе наличия атрибутов и их значений, что открывает широкие возможности для создания гибких и адаптивных стилей. Понимание различных типов селекторов по атрибуту и их правильное использование помогает разработчикам создавать более точные и эффективные стили для веб-страниц. Экспериментируйте с различными селекторами и находите оптимальные решения для ваших проектов.
Карта развития разработчика
Получите полную карту развития разработчика по всем направлениям: frontend, backend, devops, mobile