Selectores — BryanDocs

* · tipo · .clase · #id Básicos

Los cuatro selectores fundamentales: universal, de tipo, de clase y de ID.

Párrafo con .clase

Párrafo sin clase

Span con #id

A B · A > B · A + B · A ~ B Combinadores

Seleccionan elementos según su relación en el árbol DOM.

span en div

p en div span en p

p adyacente al div

p hermano

[attr] · [attr=val] · [attr^=] · [attr$=] · [attr*=] Atributo

Seleccionan elementos por sus atributos: si existe, valor exacto, prefijo, sufijo o contenido.

[href]            /* tiene href */
[type="submit"]   /* valor exacto */
[href^="https"]   /* empieza con */
[href$=".pdf"]    /* termina con */
[href*="google"]  /* contiene    */
[class~="btn"]    /* palabra en lista */
[lang|="es"]      /* es o empieza con es- */

Especificidad Cascada

El peso de un selector determina qué regla gana en conflicto. Se calcula como (ID, clase/pseudo/attr, tipo).

*0,0,0

p0,0,1

.clase0,1,0

p.clase0,1,1

#id1,0,0

!important∞

CSS Nesting — & Moderno

CSS nativo permite anidar reglas dentro de otras (como Sass). El selector & referencia el padre. Disponible desde 2023 en navegadores modernos.

.card {
  background: white;
  border-radius: 8px;

  /* Hijo directo */
  & .title { font-weight: 700; }

  /* Pseudo-clase */
  &:hover { box-shadow: 0 4px 20px rgba(0,0,0,.1); }

  /* Estado modificador */
  &.featured { border: 2px solid var(--accent); }

  /* Media query anidada */
  @media (max-width: 768px) {
    padding: 12px;
  }
}

Rendimiento de selectores Performance

El navegador evalúa los selectores de derecha a izquierda. Selectores muy profundos o con * pueden degradar el rendimiento en DOMs grandes.

⚠️ Evitar

* { margin: 0; }
.nav ul li a span { ... }
[class*="col-"] { ... }
div > * > span { ... }

✓ Preferir

.nav-link { ... }
.card-title { ... }
.col-6 { ... }
.icon { ... }

El selector key (el más a la derecha) determina el conjunto inicial que el navegador debe filtrar.

:is() · :where() · :has() Moderno

Selectores funcionales modernos que simplifican CSS complejo. :is() hereda la especificidad del selector más alto de su lista, :where() siempre 0.

/* :is() — agrupa (especificidad del mayor) */
:is(h1, h2, h3) + p { margin-top: .5em; }
:is(article, section) :is(h2, h3) { ... }

/* :where() — agrupa sin especificidad */
:where(header, main, footer) a { color: blue; }

/* :has() — selector "padre" */
figure:has(figcaption) { border-bottom: none; }
form:has(input:invalid) .submit { opacity: .5; }
li:has(ul) > a { font-weight: bold; } /* tiene sublista */

Pseudoelementos esenciales Pseudoelemento

Los pseudoelementos crean elementos virtuales o seleccionan partes específicas del contenido. Siempre usan :: doble.

::before / ::after — contenido generado

P ::first-letter — inicial decorativa

::marker — personaliza viñetas de lista ▶ ítem

::selection — selección de texto

CSS Selectores