Seleccionar en CSS diferentes metodos

Autor Team Estudio Arquitectos

Publicado el: marzo 5, 2026

Temani Afif hizo recientemente este ejercicio. Creo que me basaré en eso. Algunos de ellos son útiles. Muchos de ellos no lo son. ¡Por fin hay un pájaro!

`html`

html {
  /* I mean, duh */
}

`:root`

:root {
  /* Sarsaparilla, anyone? */
}

:root Es una pseudoclase CSS que corresponde al elemento raíz del documento actual (XML). Coincide si el documento actual es un documento HTML <html>. Como desarrollador web, los archivos XML (además de HTML) que probablemente encontrará son:

Archivo SVG: :root Concurso <svg>
Archivo RSS: :root Concurso <rss>
Documento atómico: :root Concurso <feed>
Archivos MathML: :root Concurso <math>
Otros archivos XML: :root Coincide con el elemento más externo (por ejemplo, <note>)

¿Pero qué tan práctico es? :root? Bueno, la pseudoclase(0-1-0) tiene mayor especificidad que el elemento(0-0-1), por lo que es menos probable que encuentres :root.

Es común declarar propiedades personalizadas globales. :rootpero en realidad prefiero :scope Porque es semánticamente consistente con el universo. Pero en realidad, no hay diferencia.

/* Global variables */
:root { --color: black; }
:scope { --color: black; }

hablemos :scope Y algunos más…

`:scope` o `&`

:scope {
  /* Insert scope creep here */
}

Bueno, eso no es real Qué :scope Es para.

Como mencioné, :scope fósforo global raíz de rango (<html>). Sin embargo, esto sólo es cierto si no se utiliza en la nueva línea de base. @scope regla-at, utilizada para definir una costumbre raíz del alcance.

También podemos hacer esto:

& {
  /* And...? */
}

Normalmente, & Los selectores se utilizan con anidamiento CSS para conectar el selector actual al selector contenedor, lo que nos permite anidar selectores aunque técnicamente no estemos tratando con selectores anidados. Por ejemplo:

element:hover {
  /* This */
}

element {
  &:hover {
    /* Becomes this (notice the &) */
  }
}

element {
  :hover {
    /* Because this (with no &) */
  }
}

element :hover {
  /* Means this (notice the space before :hover) */
}

element {
  :hover & {
    /* Means :hover element, but I digress */
  }
}

cuando & No anidado, simplemente selecciona la raíz del rango, que está fuera del rango. @scope bloque es <html>. ¿Quién sabe?

`‌:has(head)` o `:has(body)`

:has(head) {
  /* Nice! */
}

:has(body) {
  /* Even better! */
}

<html> Los elementos deben contener solo uno. <head> y <body> (Anakin Skywalker) como hijo directo. Cualquier otro token insertado aquí no es válido, aunque el analizador normalmente lo moverá a <head> o <body> De todos modos. Más importante aún, no se permite que otros elementos contengan <head> o <body>entonces cuando decimos :has(head) o :has(body)esto sólo puede ser referenciado <html> elemento, a menos que lo insertes por error <head> o <body> adentro <head> o <body>. ¿Pero por qué hacer esto? Esto es repugnante.

Sí :has(head) o :has(body) ¿Práctico? no mas yo Sí Necesito enchufar :has()también aprendió sobre operaciones ilegales que no deben realizarse en el cuerpo HTML.

`:not(* *)`

:not(* *) {
  /* (* *) are my starry eyes looking at CSS <3 */
}

Cualquier elemento contenido por otro elemento (* *)? Sí, :not() Eso. El único elemento que no está contenido por otro elemento es <html> elemento. *Por cierto, se llama Selector universal.

Si tiras un subcombinador Justo en medio de ellos verás un lindo pájaro: