Seletores de valor de atributo III

Lição 15 de 15 do curso Seletores CSS da Coddy.

Nesta lição, exploraremos o conceito de seletores de valor de atributo contendo uma string. Esta técnica permite que você direcione elementos HTML com base no fato de seus valores de atributo conterem uma substring específica.

Sintaxe do Seletor de Valor de Atributo Contendo:

Para direcionar elementos com valores de atributo que contenham uma string específica, você usa a sintaxe de seletor [attribute*="value"].

Exemplos de Código:

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:

/* Selects <div> elements with class attribute values containing "fruit" */
[class*="fruit"] {
   color: green;
}

Explicação dos Exemplos de Código:

Nos exemplos de código fornecidos:

Cinco elementos <div> são definidos com diferentes valores de atributo de classe.
A regra CSS [class*="fruit"] direciona elementos com um valor de atributo class contendo a substring "fruit". Ela aplica o estilo color: green; a esses elementos.

Como resultado, os elementos <div<strong>></strong> com atributos de classe "tag fruit" terão a cor do texto verde.

Desafio

Fácil

Sua tarefa é estilizar uma lista de produtos em uma página da web. Cada produto é representado por um elemento <div> com um atributo data-tags indicando suas tags (ex: "electronics", "clothing", "accessories"). Seu objetivo é estilizar os produtos de forma diferente com base em suas tags usando seletores que contêm valores de atributo.

Sua tarefa de CSS é:

Dê uma cor de fundo única aos produtos com o atributo data-tags contendo "electronics".
Dê uma borda única aos produtos com o atributo data-tags contendo "clothing".
Dê uma cor de fundo única aos produtos com o atributo data-tags contendo "accessories".

Experimente você mesmo

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

Todas as lições de Seletores CSS

1Introdução aos Seletores CSS

Objetivo dos Seletores CSS Por que eles são importantes?

4Seletores de atributo

Introdução aos seletores de atributo Presença e valores exatos Seletores de valor de atributo Seletores de valor de atributo IISeletores de valor de atributo III

2Seletores simples

Seletores de tipo Seletores de classe Seletores de ID Seletores universais

3Seletores Combinadores

Seletor de filho Seletor de descendente Seletor de irmão adjacente Seletor de irmão geral