Sobes.tech
Intern
104
questionbank

Какие существуют селекторы атрибутов в CSS?

Ответ от нейросети

sobes.tech AI

Селекторы атрибутов в CSS позволяют выбирать элементы на основе их атрибутов и их значений. Основные типы селекторов атрибутов:

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

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

    /* Выбирает все ссылки, у которых атрибут "href" равен "https://example.com" */
    a[href="https://example.com"] {
      text-decoration: none;
    }
    
  3. [атрибут~="значение"] - Выбирает все элементы, у которых указанный атрибут содержит указанное значение в качестве отдельного слова в списке, разделенном пробелами.

    /* Выбирает элементы с классом "highlight" */
    [class~="highlight"] {
      background-color: yellow;
    }
    
  4. [атрибут|="значение"] - Выбирает все элементы, у которых указанный атрибут либо равен точно заданному значению, либо начинается с этого значения, за которым следует дефис (-). Используется в основном для языковых атрибутов (lang) или префиксов.

    /* Выбирает элементы с атрибутом lang="en" или lang="en-US" */
    [lang|="en"] {
      font-style: italic;
    }
    
  5. [атрибут^="значение"] - Выбирает все элементы, у которых указанный атрибут начинается с заданного значения.

    /* Выбирает все ссылки, начинающиеся с "https://" */
    a[href^="https://"] {
      color: green;
    }
    
  6. [атрибут$="значение"] - Выбирает все элементы, у которых указанный атрибут заканчивается заданным значением.

    /* Выбирает все ссылки, заканчивающиеся на ".pdf" */
    a[href$=".pdf"] {
      font-weight: bold;
    }
    
  7. [атрибут*="значение"] - Выбирает все элементы, у которых указанный атрибут содержит заданное значение в любом месте строки (включая подстроки).

    /* Выбирает все ссылки, содержащие "example" в своем адресе */
    a[href*="example"] {
      border: 1px solid black;
    }
    

Эти селекторы можно комбинировать с другими типами селекторов (по тегу, классу, ID и т.п.) для создания более специфичных правил.