Cargando...

Selectores de atributo CSS

Hasta ahora encontrabas el elemento por nombre de etiqueta, class, id y relaciones del árbol. A veces el propio HTML ya dice la verdad: este enlace tiene target, ese campo es type="email", la dirección empieza por https. El selector de atributo lee esa verdad — sin inventar una class nueva para cada caso.

¿Qué es un selector de atributo?

Un selector de atributo encuentra elementos que tienen un atributo HTML concreto. Puedes comprobar solo la «presencia», o medir el valor con exactitud o a medias. El nombre del atributo va entre corchetes: [attr].

Cinco patrones del día a día

Con estos cubres casi todo el trabajo habitual con atributos.

📊 Operadores del selector de atributo

Patrón Significado sencillo Ejemplo
[attr] Este atributo está (cualquier valor) a[target]
[attr="value"] El valor es exactamente este input[type="email"]
[attr^="value"] El valor empieza por este texto a[href^="https"]
[attr$="value"] El valor termina con este texto a[href$=".pdf"]
[attr*="value"] Este texto aparece en algún sitio del valor a[href*="docs"]

Solo presencia — [attr]

Cuando pones solo el nombre entre corchetes, significa: «que tenga este atributo.» Da igual el valor.

Presencia — enlaces que abren pestaña nueva

css
CSS Code 
a[target] {
font-weight: 600;
}

¿Cuándo sirve?

Banderas opcionales en HTML: un enlace con target, o un elemento con data-state — aunque aún no filtres su valor.

Valor exacto — [attr="value"]

El = dice que el valor debe ser letra por letra el mismo. Pon el valor entre comillas casi siempre; queda más claro y seguro.

Valor exacto — campo de email

css
CSS Code 
input[type="email"] {
border: 1px solid #0f766e;
}

¿Class nueva o usar type?

Si el HTML ya trae type="email", escríbelo en el selector. Una class nueva (como .email-field) hace falta cuando quieres el mismo aspecto también en algo sin ese atributo.

Empieza el valor — ^=

^= significa que el valor del atributo empieza por este texto. Muy útil para direcciones seguras o un prefijo común.

Empieza con — enlaces https

css
CSS Code 
a[href^="https"] {
color: #0f766e;
}

Termina el valor — $=

$= significa que el valor termina con este texto. Ideal para la extensión de archivo en href o src.

Termina con — enlace PDF

css
CSS Code 
a[href$=".pdf"] {
font-style: italic;
}

En algún sitio del valor — *=

*= dice: este texto aparece en cualquier parte del valor. Es potente, pero se vuelve generoso rápido. Si sabes el inicio o el final, ^= o $= suelen quedar más limpios.

Contiene — ruta docs en la dirección

css
CSS Code 
a[href*="docs"] {
text-decoration: underline;
}

Buenos hábitos

  • Escribe el valor del selector entre comillas: type="email"
  • Si la página está llena, añade también el nombre de etiqueta: input[type="search"] se lee mejor que [type="search"] solo
  • Respeta la ortografía y mayúsculas/minúsculas como en el HTML
  • No sustituyas cada class por un atributo; ve al atributo cuando el propio markup ya lleva esa verdad

Pruébalo tú

  1. Tres enlaces: uno https://…, uno que termine en .pdf, uno con docs en la ruta; más <input type="email"> y <input type="text">.
  2. Pon a[href^="https"] { color: #0f766e; } — solo el enlace seguro cambia de color.
  3. a[href$=".pdf"] { font-style: italic; } — el enlace PDF se pone en cursiva.
  4. input[type="email"] { border-color: #0f766e; } — solo el campo de email toma el borde.
  5. Opcional: prueba a[href*="docs"]; puede pillar más enlaces que un prefijo/sufijo estricto.

Errores frecuentes

  • [type=email] sin comillas cuando las comillas son más claras y seguras
  • *= en lugar de ^= — «contiene» también pilla el medio y se encienden enlaces de más
  • Usar [class] en vez de .name para el aspecto habitual
  • Olvidar que = quiere el valor completo — type="text" no es type="textbox"
  • Mezclar nombres de atributos — hreflang no es href

Resumen

  • El selector de atributo trabaja con [ ] sobre atributos HTML
  • Solo el nombre = presencia; = = valor exacto
  • ^= empieza, $= termina, *= en cualquier parte del valor
  • Elige el operador más estrecho que aún diga lo que quieres
  • Si hace falta, pega también el nombre de etiqueta al selector
  • Practica con href y type reales y recarga la página

🧠 Pon a Prueba tu Conocimiento

Listo para Empezar

Pon a Prueba tu Conocimiento

Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema

❓
8
Preguntas
🎯
70%
Para Aprobar
♾️
∞
Tiempo
🔄
∞
Intentos

📝 Instrucciones

  • Lee cada pregunta cuidadosamente
  • Selecciona la mejor respuesta para cada pregunta
  • Puedes repetir el quiz tantas veces como quieras
  • Tu progreso se mostrará en la parte superior
Tema 1 de 1
Css Tutorial