Selectores de valor de atributo II

En esta lección, exploraremos el concepto de selectores de valor de atributo que termina con. Esta técnica le permite seleccionar elementos HTML basándose en los caracteres finales de sus valores de atributo.

Sintaxis del selector de valor de atributo que termina con:

Para seleccionar elementos con valores de atributo que terminan con una cadena específica, se 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 de clase que terminan con "-tertiary" */
[class$="-tertiary"] {
   background-color: lightcoral;
}

En los ejemplos de código proporcionados:

• Se definen tres botones con diferentes valores de atributo de clase.
• La regla CSS [class$="-tertiary"] selecciona elementos con un valor de atributo class que termina con "-tertiary". Aplica el estilo background-color: lightcoral; a estos botones.

Como resultado, el botón con el valor de atributo de clase "btn-tertiary" tendrá un color de fondo coral claro.