Usar data-* con selectores de atributos CSS
Aplique estilos condicionales a los elementos según los valores de sus atributos de datos
Usar data-* con selectores de atributos CSS es una lección gratuita de HTML Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de HTML Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de HTML Academy incluye 4 lecciones en total.
Selectores de atributos de CSS
Los selectores de atributos de CSS seleccionan elementos según la presencia y el valor de sus atributos: [data-state] selecciona cualquier elemento con un atributo data-state; [data-state="active"] selecciona únicamente los elementos cuyo valor sea igual a "active".
Selector de presencia
[data-tooltip] selecciona los elementos que tienen el atributo data-tooltip, independientemente de su valor. Úselo para aplicar estilos base de tooltip a cualquier elemento que tenga datos de tooltip asociados, antes de considerar el contenido del tooltip.
Selector de coincidencia exacta
[data-theme="dark"] selecciona únicamente los elementos cuyo atributo data-theme sea exactamente igual a "dark". Esto permite aplicar estilos basados en el tema: aplique tokens de color oscuros cuando el elemento html tenga establecido data-theme="dark" mediante JavaScript.
Selectores de coincidencia parcial
[data-icon^="arrow"] selecciona los valores que comienzan por "arrow". [data-label$="ing"] selecciona los valores que terminan en "ing". [data-tag*="feature"] selecciona los valores que contienen "feature". Esto permite aplicar estilos basados en patrones sin añadir muchas clases.
Máquina de estados con data-*
Modele el estado de un componente con atributos data-state: [data-state="idle"], [data-state="loading"], [data-state="error"]. Las reglas CSS para cada estado sustituyen a varios nombres de clases condicionales, mantienen el estado en un único atributo y separan claramente los estilos.
[data-state="loading"] .spinner { display: block; }
[data-state="error"] .message { color: var(--color-error); }Especificidad de los selectores de atributos
Los selectores de atributos tienen la misma especificidad que los selectores de clase (0,1,0). Al combinarlos con selectores de elementos, button[data-variant="primary"] tiene una especificidad de (0,1,1). Planifique la especificidad de los selectores de atributos junto con las reglas basadas en clases para evitar conflictos.
Patrón de tooltip
Un tooltip basado únicamente en CSS mediante data-tooltip: aplique ::after { content: attr(data-tooltip) } al pasar el cursor. La función content: attr() lee el valor del atributo y lo usa como contenido del pseudoelemento, sin necesidad de JavaScript ni de elementos HTML adicionales.
[data-tooltip]:hover::after {
content: attr(data-tooltip);
position: absolute;
background: #333;
color: white;
padding: 4px 8px;
border-radius: 4px;
}data-* frente a class para aplicar estilos
Use clases para indicar la intención de estilo (is-active, has-error) y atributos de datos para la carga de datos (data-user-id, data-count). Cuando el mismo atributo controla tanto el comportamiento (JavaScript lo lee) como los estilos (CSS lo selecciona), data-* elimina la duplicación entre JavaScript y CSS.
Combinación de selectores data-*
Encadene varios selectores de atributos: [data-type="button"][data-size="large"] selecciona los elementos que tienen establecidos ambos atributos. Esto permite realizar coincidencias compuestas sin necesitar una clase combinada como .button-large, lo que reduce la proliferación de clases.
Nota sobre el rendimiento
Los selectores de atributos son ligeramente más lentos que los selectores de clase al resolver estilos. Para estilos estáticos, prefiera las clases. Use selectores de atributos cuando el valor del atributo determine el estilo (como data-state o data-theme) y cambie durante la ejecución, ya que un único atributo sustituye a varias clases que habría que alternar.
Sensibilidad a mayúsculas y minúsculas
De forma predeterminada, la coincidencia de valores de atributos distingue entre mayúsculas y minúsculas en HTML (pero no en los códigos de idioma de XHTML). Añada la marca i para ignorar mayúsculas y minúsculas: [data-state="Active" i] coincide con "active", "Active" y "ACTIVE".
Comprobación de conocimientos
¿Qué hace el selector CSS [data-state="loading"] .spinner?
Resumen
Los selectores de atributos de CSS seleccionan atributos data-* por su presencia, su valor exacto o patrones parciales. Combinados con content: attr() para tooltips y data-state para máquinas de estados de componentes, los atributos data-* funcionan como portadores de datos y puntos de conexión para estilos CSS sin proliferación de clases.
Preguntas frecuentes
¿La lección «Usar data-* con selectores de atributos CSS» es gratis?
Sí — el texto completo de «Usar data-* con selectores de atributos CSS» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de HTML Academy, actualiza a CoddyKit PRO. El curso de HTML Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Usar data-* con selectores de atributos CSS»?
Aplique estilos condicionales a los elementos según los valores de sus atributos de datos Practicas HTML Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar HTML Academy?
No se requiere experiencia previa. HTML Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.
¿Cuánto tiempo toma la lección «Usar data-* con selectores de atributos CSS»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de HTML Academy?
Sí. Cada lección de HTML Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Sintaxis data-* y convenciones de nomenclatura
- Acceder a data-* con dataset en JavaScript
- Usar data-* con selectores de atributos CSS
- Patrones reales: tooltips y seguimiento de estados