Los selectores apuntan a qué elementos se aplica una regla. Van desde simple (por etiqueta) hasta combinadores poderosos.
css
/* Basic selectors */
p { } /* type: all <p> */
.card { }
{ }
* { }
{ }
Los selectores apuntan a qué elementos se aplica una regla. Van desde simple (por etiqueta) hasta combinadores poderosos.
/* Basic selectors */
p { } /* type: all <p> */
.card { }
{ }
* { }
{ }
.menu li { } /* descendant: any li INSIDE .menu (any depth) */
.menu > li { } /* child: only DIRECT children li */
h2 + p { } /* adjacent sibling: the p immediately AFTER an h2 */
h2 ~ p { } /* general sibling: all p siblings after an h2 */
La diferencia entre espacio (descendiente) y > (hijo directo) es importante: .menu li coincide con li profundamente anidados también, mientras que .menu > li coincide solo con el nivel superior.
a:hover { } /* state: while hovered */
li:first-child { } /* structural: the first li */
li:nth-child(2n){ } /* every even li */
p::first-line { } /* pseudo-element: the first rendered line */
h1, h2, h3 { } /* apply to all three */
:is(h1, h2) a { } /* :is() shortens long selector lists */
.card:has(img) { } /* :has() — a parent that CONTAINS an img */
Los selectores son cómo conectas estilos con el marcado.
Dominar clases (el caballo de batalla), combinadores (para relaciones) y pseudo-clases estructurales/de estado te permite apuntar con precisión sin agregar clases adicionales en todas partes — y los modernos :is()/:has() hacen que el apuntamiento complejo sea conciso.
Prefieres clases sobre identificadores/anidamiento pesado para mantener la especificidad manejable.
Una biblioteca de preguntas de entrevista de IT con respuestas detalladas — de Junior a Senior.
Donar