Какие существуют селекторы атрибутов в CSS?
Ответ от нейросети
sobes.tech AI
Селекторы атрибутов в CSS позволяют выбирать элементы на основе их атрибутов и их значений. Основные типы селекторов атрибутов:
-
[атрибут]- Выбирает все элементы, у которых установлен указанный атрибут, независимо от его значения./* Выбирает все элементы с атрибутом "title" */ [title] { color: blue; } -
[атрибут="значение"]- Выбирает все элементы, у которых указанный атрибут имеет точно заданное значение./* Выбирает все ссылки, у которых атрибут "href" равен "https://example.com" */ a[href="https://example.com"] { text-decoration: none; } -
[атрибут~="значение"]- Выбирает все элементы, у которых указанный атрибут содержит указанное значение в качестве отдельного слова в списке, разделенном пробелами./* Выбирает элементы с классом "highlight" */ [class~="highlight"] { background-color: yellow; } -
[атрибут|="значение"]- Выбирает все элементы, у которых указанный атрибут либо равен точно заданному значению, либо начинается с этого значения, за которым следует дефис (-). Используется в основном для языковых атрибутов (lang) или префиксов./* Выбирает элементы с атрибутом lang="en" или lang="en-US" */ [lang|="en"] { font-style: italic; } -
[атрибут^="значение"]- Выбирает все элементы, у которых указанный атрибут начинается с заданного значения./* Выбирает все ссылки, начинающиеся с "https://" */ a[href^="https://"] { color: green; } -
[атрибут$="значение"]- Выбирает все элементы, у которых указанный атрибут заканчивается заданным значением./* Выбирает все ссылки, заканчивающиеся на ".pdf" */ a[href$=".pdf"] { font-weight: bold; } -
[атрибут*="значение"]- Выбирает все элементы, у которых указанный атрибут содержит заданное значение в любом месте строки (включая подстроки)./* Выбирает все ссылки, содержащие "example" в своем адресе */ a[href*="example"] { border: 1px solid black; }
Эти селекторы можно комбинировать с другими типами селекторов (по тегу, классу, ID и т.п.) для создания более специфичных правил.