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

Урок 15 из 15 курса Селекторы CSS на Coddy.

В этом уроке мы изучим концепцию селекторов, выбирающих элементы по вхождению значения атрибута. Эта техника позволяет выбирать HTML-элементы на основе того, содержит ли значение их атрибута определенную подстроку.

Синтаксис селектора по вхождению значения атрибута:

Чтобы выбрать элементы, значения атрибутов которых содержат определенную строку, используется синтаксис селектора [attribute*="value"].

Примеры кода:

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:

/* Выбирает элементы <div>, значения атрибута class которых содержат "fruit" */
[class*="fruit"] {
   color: green;
}

Объяснение примеров кода:

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

Определены пять элементов <div> с различными значениями атрибута class.
CSS-правило [class*="fruit"] выбирает элементы, значение атрибута class которых содержит подстроку "fruit". Оно применяет стиль color: green; к этим элементам.

В результате элементы <div<strong>></strong> с атрибутами class "tag fruit" будут иметь зеленый цвет текста.

Задание

Легко

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

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

Задайте уникальный цвет фона для товаров, атрибут data-tags которых содержит "electronics".
Задайте уникальную рамку для товаров, атрибут data-tags которых содержит "clothing".
Задайте уникальный цвет фона для товаров, атрибут data-tags которых содержит "accessories".

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

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

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

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

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

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

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

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

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

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

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