Selectores básicos y de atributo

Guía de selectores CSS

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

Cómo leer una ficha

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.

Selectores 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 importante

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 de selector y HTML

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 conceptuales habituales

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 completa

Tipo

E

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

Especificidad(0, 0, 1)

Comportamiento importante

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 de selector y HTML

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 conceptuales habituales

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 completa

Clase

.class

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

Especificidad(0, 1, 0)

Comportamiento importante

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 de selector y HTML

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 conceptuales habituales

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 completa

ID

#id

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

Especificidad(1, 0, 0)

Comportamiento importante

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 de selector y HTML

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 conceptuales habituales

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 completa

Compuesto

E.class.class

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

Especificidad(0, 2, 1)

Comportamiento importante

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 de selector y HTML

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 conceptuales habituales

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 completa

Presencia y valor de atributo

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 importante

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 de selector y HTML

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 conceptuales habituales

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 completa

Valor exacto

[attr="value"]

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

Especificidad(0, 1, 0)

Comportamiento importante

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 de selector y HTML

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 conceptuales habituales

[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 completa

Operadores de coincidencia

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 importante

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 de selector y HTML

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 conceptuales habituales

[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 completa

Idioma o prefijo

[attr|="prefix"]

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

Especificidad(0, 1, 0)

Comportamiento importante

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 de selector y HTML

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 conceptuales habituales

[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 completa

Prefijo

[attr^="prefix"]

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

Especificidad(0, 1, 0)

Comportamiento importante

El operador ^= compara desde el primer carácter del valor.
Una cadena de comparación vacía no representa ningún elemento.

Ejemplos de selector y HTML

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 conceptuales habituales

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 completa

Sufijo

[attr$="suffix"]

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

Especificidad(0, 1, 0)

Comportamiento importante

El operador $= resulta útil para extensiones o terminaciones conocidas.
Una cadena de comparación vacía no representa ningún elemento.

Ejemplos de selector y HTML

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 conceptuales habituales

[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 completa

Fragmento

[attr*="fragment"]

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

Especificidad(0, 1, 0)

Comportamiento importante

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 de selector y HTML

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 conceptuales habituales

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 completa

Modificadores de 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 importante

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 de selector y HTML

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 conceptuales habituales

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 relevante

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 completa

Distinguiendo caja

[attr="value" s]

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

Especificidad(0, 1, 0)

Comportamiento importante

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 de selector y HTML

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 conceptuales habituales

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 relevante

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 completa

Preview del selector

Guía de selectores CSS

HTML semántico

Guía de CSS Grid

Tres columnas, no un número decimal

Coincidir no significa ganar la cascada

Los estilos inline no son selectores

Universal

Comportamiento importante

Ejemplos de selector y HTML

Errores conceptuales habituales

Tipo

Comportamiento importante

Ejemplos de selector y HTML

Errores conceptuales habituales

Clase

Comportamiento importante

Ejemplos de selector y HTML

Errores conceptuales habituales

ID

Comportamiento importante

Ejemplos de selector y HTML

Errores conceptuales habituales

Compuesto

Comportamiento importante

Ejemplos de selector y HTML

Errores conceptuales habituales

Presencia

Comportamiento importante

Ejemplos de selector y HTML

Errores conceptuales habituales

Valor exacto

Comportamiento importante

Ejemplos de selector y HTML

Errores conceptuales habituales

Palabra

Comportamiento importante

Ejemplos de selector y HTML

Errores conceptuales habituales

Idioma o prefijo

Comportamiento importante

Ejemplos de selector y HTML

Errores conceptuales habituales

Prefijo

Comportamiento importante

Ejemplos de selector y HTML

Errores conceptuales habituales

Sufijo

Comportamiento importante

Ejemplos de selector y HTML

Errores conceptuales habituales

Fragmento

Comportamiento importante

Ejemplos de selector y HTML

Errores conceptuales habituales

Sin distinguir caja

Comportamiento importante

Ejemplos de selector y HTML

Errores conceptuales habituales

Soporte relevante

Distinguiendo caja

Comportamiento importante

Ejemplos de selector y HTML

Errores conceptuales habituales

Soporte relevante