Селекторы значений атрибутов
Урок 13 из 15 курса Селекторы CSS на Coddy.
В этом уроке вы углубитесь в концепцию селекторов по началу значения атрибута. Эта техника позволяет выбирать HTML-элементы на основе начальных символов значений их атрибутов.
Синтаксис селектора по началу значения атрибута:
Чтобы выбрать элементы, значения атрибутов которых начинаются с определенной строки, используйте синтаксис селектора [attribute^="value"].
Примеры кода:
HTML:
<button class="btn-primary">Primary Button</button>
<button class="btn-secondary">Secondary Button</button>
<button class="btn-tertiary">Tertiary Button</button>CSS:
/* Выбирает кнопки, значения атрибута class которых начинаются с "btn-" */
[class^="btn-"] {
background-color: lightgray;
}В представленных примерах кода:
- Определены три кнопки с различными значениями атрибута class.
- CSS-правило
[class^="btn-"]выбирает элементы, значение атрибутаclassкоторых начинается с "btn-". Оно применяет стильbackground-color: lightgray;к этим кнопкам.
В результате все три кнопки будут иметь светло-серый цвет фона, так как значения их атрибута class начинаются с "btn-".
Задание
ЛегкоПредставьте, что у вас есть следующая HTML-структура для списка элементов. Ваша цель — стилизовать элементы списка с определенным значением атрибута data-category, которое начинается с "fruit-". Примените уникальный цвет фона к этим элементам списка с помощью CSS.
Попробуйте сами
<!DOCTYPE html>
<html>
<head>
<title>Attribute Value Starting With Selector</title>
<style>
/* Your CSS code here */
</style>
</head>
<body>
<ul>
<li data-category="fruit-apple">Apple</li>
<li data-category="vegetable-carrot">Carrot</li>
<li data-category="fruit-banana">Banana</li>
<li data-category="fruit-orange">Orange</li>
<li data-category="grain-rice">Rice</li>
</ul>
</body>
</html>
Все уроки раздела Селекторы CSS
4Селекторы атрибутов
Введение в селекторы атрибутовНаличие и точные значенияСелекторы значений атрибутовСелекторы значений атрибутов IIСелекторы значений атрибутов III