Selektory wartości atrybutu III

Lekcja 15 z 15 w kursie Selektory CSS w Coddy.

W tej lekcji omówimy selektory dopasowujące elementy na podstawie zawartości wartości atrybutu. Ta technika umożliwia wybieranie elementów HTML na podstawie tego, czy wartości ich atrybutów zawierają określony podciąg.

Składnia selektora dopasowującego zawartość wartości atrybutu:

Aby wybrać elementy, których wartości atrybutów zawierają określony ciąg znaków, użyj składni selektora [attribute*="value"].

Przykłady kodu:

HTML:

<div class="tag fruit">Apple</div>
<div class="tag vegetable">Carrot</div>
<div class="tag fruit">Banana</div>
<div class="tag fruit">Orange</div>
<div class="tag grain">Rice</div>

CSS:

/* Wybiera elementy <div>, których wartości atrybutu class zawierają "fruit" */
[class*="fruit"] {
   color: green;
}

Omówienie przykładów kodu:

W podanych przykładach kodu:

Zdefiniowano pięć elementów <div> z różnymi wartościami atrybutu class.
Reguła CSS [class*="fruit"] wybiera elementy, których wartość atrybutu class zawiera podciąg "fruit". Stosuje do tych elementów styl color: green;.

W rezultacie elementy <div<strong>></strong> z atrybutami class o wartości "tag fruit" będą miały zielony kolor tekstu.

Wyzwanie

Łatwy

Twoim zadaniem jest ostylowanie listy produktów na stronie internetowej. Każdy produkt jest reprezentowany przez element <div> z atrybutem data-tags wskazującym jego tagi (np. "electronics", "clothing", "accessories"). Twoim celem jest nadanie produktom różnych stylów w zależności od ich tagów za pomocą selektorów zawierających wartość atrybutu.

Twoje zadanie związane z CSS polega na:

Nadaniu unikalnego koloru tła produktom, których atrybut data-tags zawiera "electronics".
Nadaniu unikalnego obramowania produktom, których atrybut data-tags zawiera "clothing".
Nadaniu unikalnego koloru tła produktom, których atrybut data-tags zawiera "accessories".

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>Product List</title>
    <style>
        /* Your CSS code here */
    </style>
</head>
<body>
    <div data-tags="electronics">Smartphone</div>
    <div data-tags="clothing">T-Shirt</div>
    <div data-tags="accessories">Sunglasses</div>
    <div data-tags="electronics clothing">Headphones</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 atrybutu Selektory 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