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

6.1 Виды атрибутных селекторов

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

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

• Селектор атрибута (Attribute Selector)
• Селектор атрибута со значением (Attribute Selector with Value)
• Селектор атрибута с начальным значением (Attribute Selector with Prefix)
• Селектор атрибута с конечным значением (Attribute Selector with Suffix)
• Селектор атрибута, содержащего значение (Attribute Selector with Substring)
• Селектор атрибута с пробельным разделением (Attribute Selector with Whitespace)
• Селектор атрибута с разделением по дефису (Attribute Selector with Hyphen)

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

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

Синтаксис:

    
      [атрибут] {
        свойство: значение;
        свойство: значение;
      }
    
  

Пример:

    
      /* Выбирает все элементы, у которых есть атрибут title */
      [title] {
        color: blue;
      }
    
  

    
      <p title="Это заголовок">Этот текст будет синим.</p>
      <p>Этот текст не будет синим.</p>
    
  

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

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

Синтаксис:

    
      [атрибут="значение"] {
        свойство: значение;
        свойство: значение;
      }
    
  

Пример:

    
      /* Выбирает все элементы, у которых атрибут title имеет значение "Пример" */
      [title="Пример"] {
        color: green;
      }
    
  

    
      <p title="Пример">Этот текст будет зеленым.</p>
      <p title="Другой пример">Этот текст не будет зеленым.</p>
    
  

6.4 Селектор атрибута, где значение с префиксом

Селектор атрибута с начальным значением выбирает элементы, атрибуты которых начинаются с указанного значения.

Синтаксис:

    
      [атрибут^="значение"] {
        свойство: значение;
        свойство: значение;
      }
    
  

Пример:

    
      /* Выбирает все элементы, у которых атрибут title начинается с "Начало" */
      [title^="Начало"] {
        color: red;
      }
    
  

    
      <p title="Начало текста">Этот текст будет красным.</p>
      <p title="Не начало">Этот текст не будет красным.</p>
    
  

6.5 Селектор атрибута, где значение с суффиксом

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

Синтаксис:

    
      [атрибут$="значение"] {
        свойство: значение;
        свойство: значение;
      }
    
  

Пример:

    
      /* Выбирает все элементы, у которых атрибут title заканчивается на "конец" */
      [title$="конец"] {
        color: orange;
      }
    
  

    
      <p title="Это конец">Этот текст будет оранжевым.</p>
      <p title="Это начало">Этот текст не будет оранжевым.</p>
    
  

6.6 Селектор атрибута, содержащего значение-подстроку

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

Синтаксис:

    
      [атрибут*="значение"] {
        свойство: значение;
        свойство: значение;
      }
    
  

Пример:

    
      /* Выбирает все элементы, у которых атрибут title содержит "середина" */
      [title*="середина"] {
        color: purple;
      }
    
  

    
      <p title="Это середина текста">Этот текст будет фиолетовым.</p>
      <p title="Нет середины здесь">Этот текст не будет фиолетовым.</p>
    
  

6.7 Селектор атрибута с пробелом-разделителем

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

Синтаксис:

    
      [атрибут~="значение"] {
        свойство: значение;
        свойство: значение;
      }
    
  

Пример:

    
      /* Выбирает все элементы, у которых атрибут class содержит "highlight" в списке классов */
      [class~="highlight"] {
        background-color: yellow;
      }
    
  

    
      <p class="highlight special">Этот текст будет с желтым фоном.</p>
      <p class="special highlight">Этот текст тоже будет с желтым фоном.</p>
      <p class="special">Этот текст не будет с желтым фоном.</p>
    
  

6.8 Селектор атрибута с дефисом-разделителем

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

Синтаксис:

    
      [атрибут|="значение"] {
        свойство: значение;
        свойство: значение;
      }
    
  

Пример:

    
      p[lang|="ru"] {
        font-style: italic;
      }
    
  

    
      <p lang="ru">Этот текст будет курсивом.</p>
      <p lang="ru-RU">Этот текст тоже будет курсивом.</p>
      <p lang="en">This text will not be italicized.</p>
    
  

1

Задача

Модуль 1: Web Core, 7 уровень, 5 лекция

Недоступна

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

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

Открыть

1

Задача

Модуль 1: Web Core, 7 уровень, 5 лекция

Недоступна

Начальный атрибут

Начальный атрибут

Открыть

1

Опрос

Основы CSS, 7 уровень, 5 лекция

Недоступен

Основы CSS

Основы CSS

Открыть