Селектор по атрибуту в CSS. Стилизация элементов на основе атрибутов

Главная

База знаний

css

Селекторы в CSS

Селектор по атрибуту в CSS; Полное руководство с примерами

29 апреля 2025

Автор

Дмитрий Нечаев

Селекторы по атрибуту в 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 являются мощным инструментом для точного выбора и стилизации элементов на странице. Они позволяют выбирать элементы на основе наличия атрибутов и их значений, что открывает широкие возможности для создания гибких и адаптивных стилей. Понимание различных типов селекторов по атрибуту и их правильное использование помогает разработчикам создавать более точные и эффективные стили для веб-страниц. Экспериментируйте с различными селекторами и находите оптимальные решения для ваших проектов.