Cool Things In My Cloud

Los selectores de atributos en CSS son una herramienta muy útil que permite aplicar estilos a elementos HTML en función de los atributos que tengan (o de sus valores).

En lugar de depender únicamente de clases o identificadores, con los selectores de atributos podemos dar estilo basándonos en cosas como: el tipo de un input, el destino de un enlace o si un campo de formulario está deshabilitado.

---

Sintaxis básica

elemento[atributo] {
  propiedad: valor;
}

• elemento → el tipo de etiqueta HTML (a, input, div, etc.).
• [atributo] → el atributo que debe tener el elemento (href, type, disabled, etc.).

Ejemplo:

input[disabled] {
  background-color: #ccc;
}

Esto aplica un fondo gris a todos los campos de formulario que tengan el atributo disabled.

---

Tipos de selectores de atributos

1- Selector por presencia de atributo

Selecciona elementos que tengan un atributo, sin importar su valor.

a[target] {
  color: red;
}

Todos los enlaces con atributo target (ej. target="_blank") se pintarán en rojo.

---

2- Selector por valor exacto

Selecciona elementos cuyo atributo tenga un valor específico.

input[type="password"] {
  border: 2px solid blue;
}

Afecta solo a los input de tipo contraseña.

---

3- Selector por valor con prefijo (^=)

Coincide con atributos cuyo valor empieza con un texto.

a[href^="https"] {
  color: green;
}

Estiliza los enlaces que comienzan con https.

---

4- Selector por valor con sufijo ($=)

Coincide con atributos cuyo valor termina con un texto.

img[src$=".png"] {
  border: 1px solid black;
}

Aplica a todas las imágenes con extensión .png.

---

5- Selector por valor que contiene (*=)

Coincide con atributos que incluyen un texto en cualquier parte del valor.

a[href*="wikipedia"] {
  font-weight: bold;
}

Resalta todos los enlaces que tengan «wikipedia» en la URL.

---

6- Selector por valor de palabra (~=)

Coincide si el atributo contiene una palabra concreta (separada por espacios).

[title~="importante"] {
  background: yellow;
}

Esto aplicará a elementos con title="dato importante", pero no a title="importante123".

---

7- Selector por valor de prefijo de palabra (|=)

Coincide con un valor exacto o con un valor seguido de guion (muy útil para idiomas).

[lang|="es"] {
  font-style: italic;
}

Aplicará a lang="es" y también a lang="es-ES".

---

Ejemplo práctico

<a href="https://google.com" target="_blank">Google</a>
<a href="https://wikipedia.org">Wikipedia</a>
<img src="logo.png" alt="logo importante">

a[target] {
  color: red;
}

a[href*="wikipedia"] {
  font-weight: bold;
}

img[alt~="importante"] {
  border: 2px solid gold;
}

• El enlace a Google aparecerá en rojo.
• El enlace a Wikipedia estará en negrita.
• La imagen con alt «logo importante» tendrá un borde dorado.

---

Conclusión

Los selectores de atributos en CSS permiten aplicar estilos basados en atributos HTML sin necesidad de clases o IDs adicionales. Son muy potentes para casos como:

• Formularios (input[type="email"])
• Enlaces (a[href^="https"])
• Idiomas ([lang|="es"])
• Imágenes por extensión (img[src$=".jpg"])

Con ellos puedes escribir CSS más flexible y semántico, adaptado al contenido de tu HTML.