Selektory wartości atrybutu II

Lekcja 14 z 15 w kursie Selektory CSS w Coddy.

W tej lekcji omówimy selektory dopasowujące końcówkę wartości atrybutu. Ta technika pozwala wybierać elementy HTML na podstawie końcowych znaków wartości ich atrybutów.

Składnia selektora dopasowującego końcówkę wartości atrybutu:

Aby wybrać elementy, których wartości atrybutów kończą się określonym ciągiem znaków, użyj składni selektora [attribute$="value"].

Przykłady kodu:

HTML:

<button class="btn-primary">Primary Button</button>
<button class="btn-secondary">Secondary Button</button>
<button class="btn-tertiary">Tertiary Button</button>

CSS:

/* Wybiera przyciski, których wartości atrybutu class kończą się na "-tertiary" */
[class$="-tertiary"] {
   background-color: lightcoral;
}

W przedstawionych przykładach kodu:

Zdefiniowano trzy przyciski z różnymi wartościami atrybutu class.
Reguła CSS [class$="-tertiary"] wybiera elementy, których wartość atrybutu class kończy się ciągiem znaków "-tertiary". Stosuje do tych przycisków styl background-color: lightcoral;.

W rezultacie przycisk o wartości atrybutu class "btn-tertiary" będzie miał jasnokoralowe tło.

Wyzwanie

Łatwy

Otrzymujesz listę utworów muzycznych na stronie internetowej. Każdy utwór jest reprezentowany przez element <div> z atrybutem data-track, który wskazuje jego format (np. "mp3", "wav", "flac"). Twoim zadaniem jest nadanie utworom różnych stylów w zależności od ich formatu, używając selektorów dopasowujących końcówkę wartości atrybutu.

Twoje zadanie związane z CSS:

Nadaj unikalne tło utworom, których wartość atrybutu data-track kończy się na "mp3".
Nadaj unikalne tło utworom, których wartość atrybutu data-track kończy się na "wav".
Nadaj unikalne tło utworom, których wartość atrybutu data-track kończy się na "flac".

Spróbuj swoich sił

<!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>

Wszystkie lekcje w sekcji Selektory CSS

1Wprowadzenie do selektorów CSS

Cel selektorów CSS Dlaczego są ważne?

4Selektory atrybutów

Wprowadzenie do selektorów atrybutów Obecność i dokładne wartości Selektory wartości atrybutuSelektory wartości atrybutu IISelektory wartości atrybutu III

2Proste selektory

Selektory typów Selektory klas Selektory ID Selektory uniwersalne

3Selektory kombinatorów

Selektor potomka bezpośredniego Selektor potomka Selektor sąsiedniego rodzeństwa Selektor ogólnego rodzeństwa

Poćwicz samodzielnie: Edytor online Web