Selectores de valor de atributo

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

En esta lección, profundizarás en el concepto de selectores de valor de atributo que comienza con. Esta técnica te permite seleccionar elementos HTML basándote en los caracteres iniciales de sus valores de atributo.

Sintaxis del selector de valor de atributo que comienza con:

Para seleccionar elementos con valores de atributo que comiencen con una cadena específica, utiliza la sintaxis de selector [attribute^="value"].

Ejemplos de código:

HTML:

<button class="btn-primary">Primary Button</button>
<button class="btn-secondary">Secondary Button</button>
<button class="btn-tertiary">Tertiary Button</button>

CSS:

/* Selecciona botones con valores de atributo class que comienzan con "btn-" */
[class^="btn-"] {
   background-color: lightgray;
}

En los ejemplos de código proporcionados:

Se definen tres botones con diferentes valores de atributo class.
La regla CSS [class^="btn-"] selecciona elementos con un valor de atributo class que comienza con "btn-". Aplica el estilo background-color: lightgray; a estos botones.

El resultado es que los tres botones tendrán un color de fondo gris claro, ya que sus valores de atributo class comienzan con "btn-".

Desafío

Fácil

Imagina que tienes la siguiente estructura HTML para una lista de elementos. Tu objetivo es aplicar estilo a los elementos de la lista con un valor de atributo data-category específico que comience con "fruit-". Aplica un color de fondo único a estos elementos de la lista usando CSS.

Pruébalo tú mismo

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

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 exactosSelectores de valor de atributoSelectores de valor de atributo II Selectores 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