Selectores Avanzados

Los selectores avanzados permiten apuntar a elementos con precisión quirúrgica. El selector de hijo directo (>) selecciona solo hijos inmediatos. El selector de hermano adyacente (+) selecciona el elemento inmediatamente después. El selector de hermanos generales (~) selecciona todos los hermanos siguientes. El selector de atributo [attr="valor"] selecciona elementos por sus atributos.

/* SELECTORES RELACIONALES */
div > p { }        /* p hijo DIRECTO de div */
div p { }          /* p DESCENDIENTE de div */
h1 + p { }         /* p inmediatamente DESPUÉS de h1 */
h1 ~ p { }         /* todos los p DESPUÉS de h1 */

/* SELECTORES DE ATRIBUTO */
[href] { }                       /* tiene atributo href */
[type="email"] { }               /* type exactamente email */
[class*="btn"] { }               /* class CONTIENE "btn" */
[href^="https"] { }              /* href EMPIEZA con https */
[href$=".pdf"] { }               /* href TERMINA en .pdf */

/* NEGACIÓN */
a:not(.activo) { opacity: 0.7; }
p:not(:first-child) { margin-top: 16px; }

/* SELECTOR :is() y :where() */
:is(h1, h2, h3) { color: #00E5A0; }

/* CONTAINER QUERIES (moderno!) */
@container (min-width: 600px) {
  .tarjeta { display: grid; grid-template-columns: 1fr 1fr; }
}