Селекторы значений атрибутов II

Урок 14 из 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 которых заканчиваются на "-tertiary" */
[class$="-tertiary"] {
   background-color: lightcoral;
}

В представленных примерах кода:

Определены три кнопки с различными значениями атрибута class.
CSS-правило [class$="-tertiary"] выбирает элементы, значение атрибута class которых заканчивается на "-tertiary". Оно применяет стиль background-color: lightcoral; к этим кнопкам.

В результате кнопка со значением атрибута class "btn-tertiary" будет иметь светло-коралловый цвет фона.

Задание

Легко

Вам предоставлен список музыкальных треков на веб-странице. Каждый трек представлен элементом <div> с атрибутом data-track, указывающим на его формат (например, "mp3", "wav", "flac"). Ваша задача — стилизовать треки по-разному в зависимости от их формата, используя селекторы по окончанию значения атрибута.

Ваша задача по CSS:

Задайте уникальный фон для треков, значение атрибута data-track которых заканчивается на "mp3".
Задайте уникальный фон для треков, значение атрибута data-track которых заканчивается на "wav".
Задайте уникальный фон для треков, значение атрибута data-track которых заканчивается на "flac".

Попробуйте сами

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Music Tracks</title>
    <style>
        /* Your CSS code here */
    </style>
</head>
<body>
    <div data-track="a-mp3">Track 1 (MP3)</div>
    <div data-track="a-wav">Track 2 (WAV)</div>
    <div data-track="a-flac">Track 3 (FLAC)</div>
    <div data-track="b-mp3">Track 4 (MP3)</div>
</body>
</html>

Все уроки раздела Селекторы CSS

1Введение в селекторы CSS

Назначение селекторов CSS Почему они важны?

4Селекторы атрибутов

Введение в селекторы атрибутов Наличие и точные значения Селекторы значений атрибутовСелекторы значений атрибутов IIСелекторы значений атрибутов III

2Простые селекторы

Селекторы типов Селекторы классов Селекторы ID Универсальные селекторы

3Селекторы-комбинаторы

Дочерний селектор Селектор потомков Смежный селектор Общий родственный селектор