Selektory wartości atrybutu

Lekcja 13 z 15 w kursie Selektory CSS w Coddy.

W tej lekcji poznasz koncepcję selektorów wybierających elementy na podstawie początkowej wartości atrybutu. Ta technika pozwala wybierać elementy HTML na podstawie początkowych znaków ich wartości atrybutów.

Składnia selektora wybierającego elementy na podstawie początkowej wartości atrybutu:

Aby wybrać elementy, których wartości atrybutów zaczynają się od określonego ciągu 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 zaczynają się od "btn-" */
[class^="btn-"] {
   background-color: lightgray;
}

W podanych przykładach kodu:

Zdefiniowano trzy przyciski z różnymi wartościami atrybutu class.
Reguła CSS [class^="btn-"] wybiera elementy, których wartość atrybutu class zaczyna się od "btn-". Stosuje do tych przycisków styl background-color: lightgray;.

W rezultacie wszystkie trzy przyciski będą miały jasnoszare tło, ponieważ wartości ich atrybutów class zaczynają się od "btn-".

Wyzwanie

Łatwy

Wyobraź sobie, że masz następującą strukturę HTML listy elementów. Twoim celem jest stylowanie elementów listy o określonej wartości atrybutu data-category, która zaczyna się od "fruit-". Zastosuj unikatowy kolor tła do tych elementów listy za pomocą CSS.

Spróbuj swoich sił

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

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ściSelektory wartości atrybutuSelektory wartości atrybutu II Selektory 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