Selectores de valor de atributo III

Lección 15 de 15 del curso Selectores CSS de Coddy.

En esta lección, exploraremos el concepto de los selectores de valor de atributo que contiene. Esta técnica le permite dirigirse a elementos HTML basándose en si sus valores de atributo contienen una subcadena específica.

Sintaxis del selector de valor de atributo que contiene:

Para dirigirse a elementos con valores de atributo que contienen una cadena específica, se utiliza la sintaxis de selector [attribute*="value"].

Ejemplos 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;
}

Explicación de los ejemplos de código:

En los ejemplos de código proporcionados:

Se definen cinco elementos <div> con diferentes valores de atributo de clase.
La regla CSS [class*="fruit"] se dirige a los elementos con un valor de atributo class que contiene la subcadena "fruit". Aplica el estilo color: green; a estos elementos.

Como resultado, los elementos <div<strong>></strong> con los atributos de clase "tag fruit" tendrán el color de texto verde.

Desafío

Fácil

Tienes la tarea de dar estilo a una lista de productos en una página web. Cada producto está representado por un elemento <div> con un atributo data-tags que indica sus etiquetas (por ejemplo, "electronics", "clothing", "accessories"). Tu objetivo es dar estilo a los productos de forma diferente según sus etiquetas utilizando selectores que contienen valores de atributos.

Tu tarea de CSS es:

Asignar un color de fondo único a los productos con el atributo data-tags que contenga "electronics".
Asignar un borde único a los productos con el atributo data-tags que contenga "clothing".
Asignar un color de fondo único a los productos con el atributo data-tags que contenga "accessories".

Pruébalo tú mismo

<!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 las lecciones de Selectores CSS

1Introducción a los selectores CSS

Propósito de los selectores CSS ¿Por qué son importantes?

4Selectores de atributos

Introducción a los selectores de atributos Presencia y valores exactos Selectores de valor de atributo Selectores de valor de atributo IISelectores de valor de atributo III

2Selectores simples

Selectores de tipo Selectores de clase Selectores de ID Selectores universales

3Selectores combinadores

Selector de hijo Selector de descendiente Selector de hermano adyacente Selector de hermano general