Selectores estructurales CSS

Guía de selectores estructurales CSS

Lee la estructura antes de contar posiciones

Distingue contenido vacío, posición global y posición por tipo; construye fórmulas An+B y entiende cuándo of cambia la lista contada.

Volver al playground

Cuatro ideas antes de contar hermanos

Las pseudoclases estructurales evalúan el árbol del documento, no la distribución visual creada por CSS.

An+B

An+B genera posiciones

A marca el salto y B el punto de partida; n toma enteros desde cero que produzcan índices positivos. Las palabras odd y even equivalen a 2n+1 y 2n.

of <selector-list>

of filtra antes de contar

En :nth-child() y :nth-last-child(), la lista opcional reduce primero los hermanos candidatos.

:nth-last-…

last invierte el sentido

Las variantes nth-last cuentan desde el final sin invertir el orden del DOM.

:…-of-type

of-type separa por nombre

Solo compiten hermanos del mismo tipo de elemento que el sujeto.

Raíz y ausencia de contenido

:root identifica la raíz del documento y :empty comprueba si un elemento carece de hijos relevantes.

:root

Selecciona el elemento raíz del árbol del documento.

Especificidad(0, 1, 0)

Comportamiento importante

En un documento HTML coincide normalmente con html; en SVG independiente coincide con svg.
El playground representa esa raíz con el marco exterior porque su preview vive dentro del documento de BaselineLab.

Ejemplos de selector y HTML

SelectorEspecificidad(0, 1, 0)

:root

HTML

→Coincide: <html lang="es">
  <body>...</body>
</html>

SelectorEspecificidad(0, 1, 0)

:root

HTML

→Coincide: <svg xmlns="http://www.w3.org/2000/svg">
  <circle />
</svg>

Errores conceptuales habituales

No equivale siempre a html porque depende del lenguaje del documento.
No selecciona la raíz de cada componente o sección anidada.

Consultar la definición completa

:empty

Selecciona elementos sin hijos elemento ni contenido de texto que cuente para la coincidencia.

Especificidad(0, 1, 0)

Comportamiento importante

Los comentarios no impiden la coincidencia; un elemento hijo sí.
La preview muestra el resultado real del navegador, incluido el caso de whitespace que Selectors Level 4 está evolucionando.

Ejemplos de selector y HTML

SelectorEspecificidad(0, 2, 0)

.slot:empty

HTML

→Coincide: <div class="slot"></div>
<div class="slot">CSS</div>

SelectorEspecificidad(0, 1, 1)

p:empty

HTML

→Coincide: <p><!-- Comment --></p>
<p><span></span></p>

SelectorEspecificidad(0, 1, 1)

li:empty

HTML

<ul>
→Coincide:   <li></li>
  <li>Item</li>
</ul>

Errores conceptuales habituales

Un elemento con espacios puede parecer vacío y no coincidir en implementaciones actuales.
Un elemento sustituido como img puede coincidir aunque renderice contenido propio.

Consultar la definición completa

Posición entre hijos elemento

Cuenta todos los hermanos elemento, o una lista previamente filtrada mediante of.

:first-child

Selecciona un elemento cuando es el primer hijo elemento de su padre.

Especificidad(0, 1, 0)

Comportamiento importante

Los nodos de texto y comentarios no ocupan posiciones.
Puede combinarse con un tipo o clase para restringir el sujeto.

Ejemplos de selector y HTML

SelectorEspecificidad(0, 1, 1)

li:first-child

HTML

<ul>
→Coincide:   <li>Uno</li>
  <li>Dos</li>
</ul>

SelectorEspecificidad(0, 1, 1)

article > :first-child

HTML

<article>
→Coincide:   <h2>Title</h2>
  <p>Text</p>
</article>

Errores conceptuales habituales

No significa el primer elemento de ese tipo; para eso existe :first-of-type.
El orden visual de Grid o Flexbox no cambia el orden estructural.

Consultar la definición completa

:last-child

Selecciona un elemento cuando es el último hijo elemento de su padre.

Especificidad(0, 1, 0)

Comportamiento importante

Evalúa el orden del DOM, no la posición pintada.
No exige escribir explícitamente el selector del padre.

Ejemplos de selector y HTML

SelectorEspecificidad(0, 1, 1)

li:last-child

HTML

<ul>
  <li>Uno</li>
→Coincide:   <li>Dos</li>
</ul>

SelectorEspecificidad(0, 1, 1)

section > :last-child

HTML

<section>
  <p>Text</p>
→Coincide:   <footer>Footer</footer>
</section>

Errores conceptuales habituales

No equivale a :last-of-type cuando después hay un hermano de otro tipo.
Un nodo de texto posterior no lo deja de ser el último hijo elemento.

Consultar la definición completa

:only-child

Selecciona un elemento sin hermanos elemento.

Especificidad(0, 1, 0)

Comportamiento importante

Equivale a combinar :first-child:last-child.
Texto y comentarios del padre no cuentan como hermanos elemento.

Ejemplos de selector y HTML

SelectorEspecificidad(0, 1, 1)

p:only-child

HTML

<aside>
→Coincide:   <p>Only</p>
</aside>
<aside>
  <p>One</p>
  <p>Two</p>
</aside>

SelectorEspecificidad(0, 2, 0)

.card > :only-child

HTML

<article class="card">
→Coincide:   <img alt="Cover" />
</article>

Errores conceptuales habituales

No exige que el padre esté vacío aparte del sujeto.
No equivale a :only-of-type si existen hermanos de otros tipos.

Consultar la definición completa

:nth-child()

:nth-child(An+B [of S]?)

Selecciona posiciones An+B entre los hijos elemento, opcionalmente filtrados por of.

Especificidad(0, 1, 0)

Comportamiento importante

odd equivale a 2n+1 y even a 2n; -n+3 limita el resultado a las tres primeras posiciones.
Con of S se filtran primero los hermanos y después se numeran los que quedan.

Ejemplos de selector y HTML

SelectorEspecificidad(0, 1, 1)

li:nth-child(2n + 1)

HTML

<ol>
→Coincide:   <li>1</li>
  <li>2</li>
→Coincide:   <li>3</li>
</ol>

SelectorEspecificidad(0, 2, 1)

li:nth-child(-n + 3 of .featured)

HTML

<ol>
→Coincide:   <li class="featured">A</li>
  <li>B</li>
→Coincide:   <li class="featured">C</li>
→Coincide:   <li class="featured">D</li>
  <li class="featured">E</li>
</ol>

Errores conceptuales habituales

:nth-child(2 of .featured) no equivale a .featured:nth-child(2).
n empieza en cero, pero solo coinciden índices finales positivos.

Soporte relevante

Este estado Baseline corresponde a la sintaxis of <selector-list>, más reciente que :nth-child() sin filtro.

Consultar la definición completa

:nth-last-child()

:nth-last-child(An+B [of S]?)

Selecciona posiciones An+B contando hijos elemento desde el final.

Especificidad(0, 1, 0)

Comportamiento importante

Acepta la misma cláusula of que :nth-child() y filtra antes de contar.
El sentido del conteo cambia, pero los elementos conservan su orden en el DOM.

Ejemplos de selector y HTML

SelectorEspecificidad(0, 1, 1)

li:nth-last-child(2)

HTML

<ol>
  <li>1</li>
→Coincide:   <li>2</li>
  <li>3</li>
</ol>

SelectorEspecificidad(0, 2, 1)

li:nth-last-child(2n of .featured)

HTML

<ol>
  <li class="featured">A</li>
  <li>B</li>
→Coincide:   <li class="featured">C</li>
  <li class="featured">D</li>
</ol>

Errores conceptuales habituales

No selecciona los últimos n elementos salvo que la fórmula exprese ese rango.
El filtro of pertenece al argumento, no se escribe fuera de la pseudoclase.

Soporte relevante

Este estado Baseline corresponde al filtro of <selector-list> usado durante el conteo inverso.

Consultar la definición completa

Posición entre hermanos del mismo tipo

Ignora los hermanos de otros tipos al decidir si el sujeto es primero, último, único o una posición An+B.

:first-of-type

Selecciona el primer hermano de su tipo de elemento.

Especificidad(0, 1, 0)

Comportamiento importante

Puede tener antes hermanos de otros tipos y seguir coincidiendo.
El tipo procede del selector compuesto al que pertenece la pseudoclase.

Ejemplos de selector y HTML

SelectorEspecificidad(0, 1, 1)

p:first-of-type

HTML

<article>
  <h2>Title</h2>
→Coincide:   <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</article>

SelectorEspecificidad(0, 1, 1)

img:first-of-type

HTML

<figure>
  <span>Gallery</span>
→Coincide:   <img alt="First" />
  <img alt="Second" />
</figure>

Errores conceptuales habituales

No significa el primer hijo del padre.
No cuenta clases como tipos distintos.

Consultar la definición completa

:last-of-type

Selecciona el último hermano de su tipo de elemento.

Especificidad(0, 1, 0)

Comportamiento importante

Puede tener después hermanos de otros tipos.
El conteo compara nombres de elemento, no roles o estilos.

Ejemplos de selector y HTML

SelectorEspecificidad(0, 1, 1)

p:last-of-type

HTML

<article>
  <p>First</p>
  <aside>Note</aside>
→Coincide:   <p>Last</p>
</article>

SelectorEspecificidad(0, 1, 1)

button:last-of-type

HTML

<nav>
  <button>Previous</button>
  <a href="#">Help</a>
→Coincide:   <button>Next</button>
</nav>

Errores conceptuales habituales

No equivale a :last-child.
Cambiar el orden visual no cambia qué elemento coincide.

Consultar la definición completa

:only-of-type

Selecciona un elemento que no tiene hermanos del mismo tipo.

Especificidad(0, 1, 0)

Comportamiento importante

Puede coexistir con cualquier cantidad de hermanos de otros tipos.
Equivale a :first-of-type:last-of-type.

Ejemplos de selector y HTML

SelectorEspecificidad(0, 1, 1)

p:only-of-type

HTML

<article>
  <h2>Title</h2>
→Coincide:   <p>Only paragraph</p>
  <aside>Note</aside>
</article>

SelectorEspecificidad(0, 1, 1)

img:only-of-type

HTML

<figure>
→Coincide:   <img alt="Only image" />
  <figcaption>Caption</figcaption>
</figure>

Errores conceptuales habituales

No exige ser hijo único.
Una clase diferente no crea un tipo de elemento diferente.

Consultar la definición completa

:nth-of-type()

:nth-of-type(An+B)

Selecciona posiciones An+B entre hermanos del mismo tipo.

Especificidad(0, 1, 0)

Comportamiento importante

Los hermanos de otros tipos se omiten antes de numerar.
Admite odd, even, números y fórmulas An+B, pero no la cláusula of.

Ejemplos de selector y HTML

SelectorEspecificidad(0, 1, 1)

p:nth-of-type(2n)

HTML

<article>
  <p>1</p>
  <aside>Note</aside>
→Coincide:   <p>2</p>
  <p>3</p>
→Coincide:   <p>4</p>
</article>

SelectorEspecificidad(0, 1, 1)

h2:nth-of-type(2)

HTML

<main>
  <h2>First</h2>
  <p>Text</p>
→Coincide:   <h2>Second</h2>
</main>

Errores conceptuales habituales

No es una abreviatura de :nth-child(... of tipo) en toda composición compleja.
El tipo lo determina el nombre del elemento, no una clase.

Consultar la definición completa

:nth-last-of-type()

:nth-last-of-type(An+B)

Selecciona posiciones An+B del mismo tipo contando desde el final.

Especificidad(0, 1, 0)

Comportamiento importante

Omite otros tipos y comienza la numeración en el último hermano del tipo del sujeto.
Usa la misma microsintaxis An+B que el resto de variantes nth.

Ejemplos de selector y HTML

SelectorEspecificidad(0, 1, 1)

p:nth-last-of-type(2)

HTML

<article>
  <p>1</p>
  <aside>Note</aside>
→Coincide:   <p>2</p>
  <p>3</p>
</article>

SelectorEspecificidad(0, 1, 1)

img:nth-last-of-type(odd)

HTML

<figure>
→Coincide:   <img alt="1" />
  <span>Separator</span>
  <img alt="2" />
→Coincide:   <img alt="3" />
</figure>

Errores conceptuales habituales

No cuenta todos los hijos desde el final.
No admite of <selector-list>.

Consultar la definición completa

Preview del selector

Vacío real

Solo comentario

Solo espacios en blanco

Contenido de texto

Un único párrafo entre otros tipos

Hermanos de tipos mezclados

An+B genera posiciones

of filtra antes de contar

last invierte el sentido

of-type separa por nombre

:root

Comportamiento importante

Ejemplos de selector y HTML

Errores conceptuales habituales

:empty

Comportamiento importante

Ejemplos de selector y HTML

Errores conceptuales habituales

:first-child

Comportamiento importante

Ejemplos de selector y HTML

Errores conceptuales habituales

:last-child

Comportamiento importante

Ejemplos de selector y HTML

Errores conceptuales habituales

:only-child

Comportamiento importante

Ejemplos de selector y HTML

Errores conceptuales habituales

:nth-child()

Comportamiento importante

Ejemplos de selector y HTML

Errores conceptuales habituales

Soporte relevante

:nth-last-child()

Comportamiento importante

Ejemplos de selector y HTML

Errores conceptuales habituales

Soporte relevante

:first-of-type

Comportamiento importante

Ejemplos de selector y HTML

Errores conceptuales habituales

:last-of-type

Comportamiento importante

Ejemplos de selector y HTML

Errores conceptuales habituales

:only-of-type

Comportamiento importante

Ejemplos de selector y HTML

Errores conceptuales habituales

:nth-of-type()

Comportamiento importante

Ejemplos de selector y HTML

Errores conceptuales habituales

:nth-last-of-type()

Comportamiento importante

Ejemplos de selector y HTML

Errores conceptuales habituales