BaselineLab
0Apoyar

Selectores básicos y de atributo

Construye selectores básicos y de atributo, compáralos sobre tres escenarios HTML y examina cada coincidencia y su especificidad.

Leer la guía

Preguntar a la IA

Selectores básicos y de atributo

Respuesta generada con openai/gpt-5.4-nano. La IA puede cometer errores. Revisa siempre el resultado.
Selector actualarticle
Soporte sin confirmarEspecificidad—

Preparando el escenario y sus resultados…

Selecciona todos los elementos <article> del escenario.

Preview del selector

HTML semántico

Estructuras accesibles para documentos web.

Guía de CSS Grid

Layouts modernos con filas y columnas.

HTML
<section
  id="component-catalog"
  class="catalog"
  aria-label="Catálogo de guías y demos"
>
  <article
    id="featured-card"
    class="card featured"
    data-kind="guide"
    data-tags="css selectors"
    data-code="CSS-BASICS"
    data-file="selectors.pdf"
    data-note="learn-selector-specificity"
    lang="es-MX"
  >
    <h3>Guía de selectores CSS</h3>
    <p>Tipos, clases, atributos y especificidad.</p>
  </article>
  <article
    class="card"
    data-kind="demo"
    data-tags="html semantics"
    data-code="HTML-BASICS"
    data-file="semantics.html"
    data-note="semantic-markup"
    lang="en-US"
  >
    <h3>HTML semántico</h3>
    <p>Estructuras accesibles para documentos web.</p>
  </article>
  <article
    class="card"
    data-kind="guide"
    data-tags="css layout"
    data-code="CSS-GRID"
    data-file="grid.pdf"
    data-note="layout-selector-reference"
    lang="es-ES"
  >
    <h3>Guía de CSS Grid</h3>
    <p>Layouts modernos con filas y columnas.</p>
  </article>
</section>
CSS
article {
  outline: 3px solid #f97316;
  outline-offset: 3px;
  background-color: color-mix(in oklch, #f97316 16%, transparent);
}

Guía educativa de selectores básicos y de atributos

Entiende qué expresa cada selector

Compara qué selecciona cada sintaxis, cómo contribuye a la especificidad y qué restricciones conviene recordar antes de usarla.

Volver al playground

Modelo mental

Coincidencia, especificidad y cascada responden a preguntas distintas. Separarlas evita atribuir a un selector efectos que dependen de las declaraciones o del orden de las reglas.

(ID, CLASS, TYPE)

Tres columnas, no un número decimal

ID cuenta selectores de ID, CLASS agrupa clases, atributos y pseudoclases, y TYPE cuenta tipos y pseudoelementos. Se comparan de izquierda a derecha.

selector → matches

Coincidir no significa ganar la cascada

El selector decide qué elementos entran en la regla. El origen, las capas, la importancia, la especificidad y el orden deciden qué declaración prevalece.

style="..."

Los estilos inline no son selectores

Un atributo style participa en la cascada con prioridad propia, pero no añade una cuarta columna a la tupla de especificidad de un selector.

Básicos

Seleccionan por tipo, clase o ID, o combinan varias condiciones sobre el mismo elemento.

Universal

*

Representa cualquier elemento dentro del contexto en el que se evalúa.

Especificidad(0, 0, 0)
Comportamiento
  • No aporta especificidad y no representa nodos de texto, comentarios ni pseudoelementos.
  • Si aparece solo selecciona todos los elementos; combinado, como en .card *, selecciona todos los elementos que están dentro de cada .card.
Ejemplos
SelectorEspecificidad(0, 0, 0)
*
HTML
Coincide: <section>
  Este texto no es un elemento.
Coincide:   <span>Coincide</span>
</section>
SelectorEspecificidad(0, 1, 0)
.card *
HTML
<article class="card">
Coincide:   <strong>Coincide</strong>
Coincide:   <span>Coincide</span>
</article>
<p>No coincide</p>
Errores frecuentes
  • No debe presentarse como «el selector más lento»: el coste depende de la regla completa, el DOM, la invalidación y el navegador.
  • Añadir * a un selector no aumenta su especificidad.
Consultar la definición completaAbre en una pestaña nueva

Tipo

E

Selecciona todos los elementos que tienen el nombre indicado, como article.

Especificidad(0, 0, 1)
Comportamiento
  • Cada selector de tipo aporta una unidad a la columna TYPE.
  • Describe el nombre del elemento, no su rol visual ni una clase con el mismo texto.
Ejemplos
SelectorEspecificidad(0, 0, 1)
article
HTML
Coincide: <article>Coincide</article>
<section>No coincide</section>
SelectorEspecificidad(0, 0, 1)
button
HTML
<nav>
  <a href="#">No coincide</a>
Coincide:   <button type="button">Coincide</button>
</nav>
Errores frecuentes
  • Escribir .article buscaría una clase llamada article, no elementos <article>.
  • Elegir un elemento solo por su apariencia puede acoplar el CSS a una estructura HTML innecesariamente rígida.
Consultar la definición completaAbre en una pestaña nueva

Clase

.class

Selecciona cualquier elemento cuya lista de clases contenga el identificador indicado.

Especificidad(0, 1, 0)
Comportamiento
  • Una clase puede reutilizarse en tantos elementos como sea necesario.
  • Un mismo elemento puede tener varias clases separadas por espacios; cada selector de clase aporta una unidad a CLASS.
Ejemplos
SelectorEspecificidad(0, 1, 0)
.featured
HTML
Coincide: <article class="featured">Coincide</article>
Coincide: <p class="featured">Coincide</p>
<aside>No coincide</aside>
SelectorEspecificidad(0, 1, 0)
.note
HTML
<aside>
Coincide:   <p class="note">Coincide</p>
  <p>No coincide</p>
</aside>
Errores frecuentes
  • Omitir el punto convierte el texto en un selector de tipo.
  • La coincidencia es por tokens de clase completos: .card no coincide con class="card-large".
Consultar la definición completaAbre en una pestaña nueva

ID

#id

Selecciona los elementos cuyo identificador coincide exactamente con el valor escrito tras #.

Especificidad(1, 0, 0)
Comportamiento
  • En un documento HTML conforme, cada valor de id debe identificar un único elemento.
  • CSS puede hacer coincidir varios elementos con el mismo ID si el documento no es conforme; el motor no corrige esa duplicación.
Ejemplos
SelectorEspecificidad(1, 0, 0)
#featured-card
HTML
Coincide: <article id="featured-card">Coincide</article>
<article id="secondary-card">No coincide</article>
SelectorEspecificidad(1, 0, 0)
#primary-action
HTML
<form>
Coincide:   <button id="primary-action">Coincide</button>
  <button>No coincide</button>
</form>
Errores frecuentes
  • Suponer que el selector devolverá siempre un solo elemento oculta errores de IDs duplicados.
  • Su peso (1, 0, 0) puede hacer que una regla sea más difícil de sobrescribir de lo necesario.
Consultar la definición completaAbre en una pestaña nueva

Compuesto

E.class.class

Selecciona un mismo elemento que cumple simultáneamente todas las condiciones escritas sin combinadores.

Especificidad(0, 2, 1)
Comportamiento
  • article.card.featured exige el tipo article y las dos clases sobre el mismo elemento.
  • La especificidad suma la contribución de cada selector simple que forma el compuesto.
Ejemplos
SelectorEspecificidad(0, 2, 1)
article.card.featured
HTML
Coincide: <article class="card featured">Coincide</article>
<article class="card">No coincide</article>
SelectorEspecificidad(0, 2, 1)
button.action.primary
HTML
<form>
Coincide:   <button class="action primary">Coincide</button>
  <a class="action primary">No coincide</a>
  <button class="action">No coincide</button>
</form>
Errores frecuentes
  • Introducir un espacio cambia el significado: article .featured buscaría un descendiente.
  • Reordenar las clases del compuesto no cambia su especificidad ni exige ese mismo orden en el atributo class.
Consultar la definición completaAbre en una pestaña nueva

Presencia y valor

Distingue entre comprobar que un atributo existe y exigir que su valor completo sea exactamente uno concreto.

Presencia

[attr]

Selecciona los elementos que tienen el atributo indicado, cualquiera que sea su valor.

Especificidad(0, 1, 0)
Comportamiento
  • Un atributo presente con valor vacío también coincide con [attr].
  • La comprobación se realiza sobre el atributo representado en el árbol del documento y aporta una unidad a CLASS.
Ejemplos
SelectorEspecificidad(0, 1, 0)
[data-kind]
HTML
Coincide: <article data-kind="">Coincide</article>
<article>No coincide</article>
SelectorEspecificidad(0, 1, 0)
[disabled]
HTML
<form>
Coincide:   <input disabled value="Coincide">
  <input value="No coincide">
</form>
Errores frecuentes
  • No comprueba si el valor es verdadero, no vacío o útil; solo comprueba presencia.
  • Una propiedad JavaScript con el mismo nombre no sustituye al atributo si este no aparece en el DOM.
Consultar la definición completaAbre en una pestaña nueva

Valor exacto

[attr="value"]

Selecciona los elementos cuyo valor completo de atributo es exactamente el indicado.

Especificidad(0, 1, 0)
Comportamiento
  • El operador = no divide listas ni busca fragmentos dentro del valor.
  • La regla de mayúsculas y minúsculas depende del atributo y del lenguaje, salvo que se añada i o s.
Ejemplos
SelectorEspecificidad(0, 1, 0)
[data-kind="guide"]
HTML
Coincide: <article data-kind="guide">Coincide</article>
<article data-kind="guide-draft">No coincide</article>
SelectorEspecificidad(0, 1, 0)
[data-state="open"]
HTML
<dialog>
Coincide:   <button data-state="open">Coincide</button>
  <button data-state="opening">No coincide</button>
</dialog>
Errores frecuentes
  • [data-kind="guide"] no coincide con data-kind="guide-draft".
  • No debe usarse = cuando el atributo representa una lista de palabras y solo se necesita una de ellas.
Consultar la definición completaAbre en una pestaña nueva

Operadores

Cada operador interpreta el valor del atributo de forma diferente: palabra, prefijo con guion, comienzo, final o fragmento.

Palabra

[attr~="word"]

Busca una palabra completa dentro de una lista de valores separados por espacios CSS.

Especificidad(0, 1, 0)
Comportamiento
  • El operador ~= es adecuado para atributos multivalor como class o data-tags.
  • La palabra buscada debe estar delimitada por whitespace; no es una búsqueda de subcadenas.
Ejemplos
SelectorEspecificidad(0, 1, 0)
[data-tags~="css"]
HTML
Coincide: <article data-tags="css selectors">Coincide</article>
<article data-tags="scss">No coincide</article>
SelectorEspecificidad(0, 1, 0)
[rel~="external"]
HTML
<nav>
Coincide:   <a rel="help external">Coincide</a>
  <a rel="external-link">No coincide</a>
</nav>
Errores frecuentes
  • [data-tags~="css"] no coincide con el token scss.
  • Las comas no son separadores para este operador: interpreta una lista separada por espacios.
Consultar la definición completaAbre en una pestaña nueva

Idioma o prefijo

[attr|="prefix"]

Coincide con el valor exacto o con ese valor seguido inmediatamente de un guion.

Especificidad(0, 1, 0)
Comportamiento
  • El operador |= está pensado para prefijos estructurados, especialmente etiquetas de idioma como es y es-MX.
  • No coincide con cualquier texto que empiece igual: el carácter siguiente debe ser un guion.
Ejemplos
SelectorEspecificidad(0, 1, 0)
[lang|="es"]
HTML
Coincide: <article lang="es">Coincide</article>
Coincide: <article lang="es-MX">Coincide</article>
<article lang="especial">No coincide</article>
SelectorEspecificidad(0, 1, 0)
[data-locale|="pt"]
HTML
<section>
Coincide:   <p data-locale="pt-BR">Coincide</p>
  <p data-locale="pt_BR">No coincide</p>
</section>
Errores frecuentes
  • [lang|="es"] no es equivalente a [lang^="es"].
  • Valores como es_MX o especial no coinciden porque no usan el separador requerido.
Consultar la definición completaAbre en una pestaña nueva

Prefijo

[attr^="prefix"]

Selecciona valores de atributo que comienzan exactamente por la cadena indicada.

Especificidad(0, 1, 0)
Comportamiento
  • El operador ^= compara desde el primer carácter del valor.
  • Una cadena de comparación vacía no representa ningún elemento.
Ejemplos
SelectorEspecificidad(0, 1, 0)
[data-code^="CSS"]
HTML
Coincide: <article data-code="CSS-GRID">Coincide</article>
<article data-code="HTML-CSS">No coincide</article>
SelectorEspecificidad(0, 1, 0)
[href^="https://"]
HTML
<nav>
Coincide:   <a href="https://example.com">Coincide</a>
  <a href="/docs/css">No coincide</a>
</nav>
Errores frecuentes
  • No encuentra el prefijo en una posición intermedia; para eso existe *=.
  • No ignora mayúsculas y minúsculas por sí mismo.
Consultar la definición completaAbre en una pestaña nueva

Sufijo

[attr$="suffix"]

Selecciona valores de atributo que terminan exactamente con la cadena indicada.

Especificidad(0, 1, 0)
Comportamiento
  • El operador $= resulta útil para extensiones o terminaciones conocidas.
  • Una cadena de comparación vacía no representa ningún elemento.
Ejemplos
SelectorEspecificidad(0, 1, 0)
[data-file$=".pdf"]
HTML
Coincide: <a data-file="selectors.pdf">Coincide</a>
<a data-file="selectors.html">No coincide</a>
SelectorEspecificidad(0, 1, 0)
[href$=".pdf"]
HTML
<ul>
  <li>
Coincide:     <a href="/guide.pdf">Coincide</a>
  </li>
  <li>
    <a href="/pdf/guide">No coincide</a>
  </li>
</ul>
Errores frecuentes
  • [data-file$=".pdf"] no coincide si .pdf aparece antes del final.
  • El selector compara texto; no valida que el recurso sea realmente un PDF.
Consultar la definición completaAbre en una pestaña nueva

Fragmento

[attr*="fragment"]

Selecciona valores que contienen al menos una aparición de la cadena indicada.

Especificidad(0, 1, 0)
Comportamiento
  • El operador *= puede encontrar el fragmento al inicio, en medio o al final.
  • Una cadena de comparación vacía no representa ningún elemento.
Ejemplos
SelectorEspecificidad(0, 1, 0)
[data-note*="selector"]
HTML
Coincide: <article data-note="selector-reference">Coincide</article>
<article data-note="layout-reference">No coincide</article>
SelectorEspecificidad(0, 1, 0)
[href*="/docs/"]
HTML
<nav>
Coincide:   <a href="/docs/selectors/">Coincide</a>
  <a href="/documentation/">No coincide</a>
</nav>
Errores frecuentes
  • Puede producir coincidencias más amplias de lo esperado porque no respeta límites de palabra.
  • No debe confundirse con ~=, que exige un token completo separado por espacios.
Consultar la definición completaAbre en una pestaña nueva

Mayúsculas y minúsculas

Los modificadores i y s cambian cómo se compara el valor, independientemente de la regla por defecto del lenguaje del documento.

Sin distinguir caja

[attr="value" i]

Compara el valor del atributo sin distinguir mayúsculas y minúsculas dentro del rango ASCII.

Especificidad(0, 1, 0)
Comportamiento
  • El modificador i afecta a la comparación del valor que aparece en ese selector de atributo.
  • ASCII case-insensitive considera equivalentes A-Z y a-z, pero no implementa plegado Unicode completo.
Ejemplos
SelectorEspecificidad(0, 1, 0)
[data-code="css-basics" i]
HTML
Coincide: <article data-code="CSS-BASICS">Coincide</article>
Coincide: <article data-code="Css-Basics">Coincide</article>
<article data-code="HTML-BASICS">No coincide</article>
SelectorEspecificidad(0, 1, 0)
[data-theme="dark" i]
HTML
<section>
Coincide:   <button data-theme="DARK">Coincide</button>
  <button data-theme="light">No coincide</button>
</section>
Errores frecuentes
  • No se debe afirmar que i ignora todas las diferencias de caja de cualquier alfabeto.
  • El modificador no vuelve insensible a caja el resto del selector compuesto.
Soporte y compatibilidad

Este estado Baseline corresponde al modificador i. La preview sigue comprobando por separado si el navegador actual puede evaluar el selector concreto.

Consultar la definición completaAbre en una pestaña nueva

Distinguiendo caja

[attr="value" s]

Fuerza una comparación idéntica del valor, respetando mayúsculas y minúsculas.

Especificidad(0, 1, 0)
Comportamiento
  • El modificador s sobrescribe la regla de caja que aplicaría por defecto el lenguaje del documento.
  • Solo puede distinguir valores si el modelo del documento conserva la caja original.
Ejemplos
SelectorEspecificidad(0, 1, 0)
[data-code="CSS-BASICS" s]
HTML
Coincide: <article data-code="CSS-BASICS">Coincide</article>
<article data-code="css-basics">No coincide</article>
SelectorEspecificidad(0, 1, 0)
[data-state="OPEN" s]
HTML
<dialog>
Coincide:   <button data-state="OPEN">Coincide</button>
  <button data-state="open">No coincide</button>
</dialog>
Errores frecuentes
  • Que la sintaxis sea válida no implica que todos los navegadores puedan evaluarla.
  • No siempre es redundante: algunos atributos HTML tienen reglas de coincidencia propias.
Soporte y compatibilidad

Este estado Baseline corresponde al modificador s. Si el navegador no lo soporta, el lab lo indica como no evaluable sin simular una coincidencia.

Consultar la definición completaAbre en una pestaña nueva