Ya estás utilizando selectores CSS, incluso si sabes lo que son. Un selector CSS te ayuda a apuntar a un conjunto específico de elementos dentro de tu página. Algunos de ellos apuntan a uno solo, mientras que otros apuntan a un tipo de elemento o a un subconjunto que has marcado con clases CSS. La razón principal es aplicar estilos a los elementos coincidentes.
Por ejemplo, este ejemplo básico localiza todos los elementos de párrafo <p>y cambia el color del texto a rojo:
p {
color: red;
}Y este encuentra un solo elemento y actualiza su atributo de relleno (padding):
#my-element {
padding: 5px;
}En particular, las pseudo-clases te permiten seleccionar elementos cuando entran en un cierto estado. Por ejemplo, una que ha estado presente desde siempre es la pseudo-clase :hover. Estilos específicos solo se aplicarán si estás pasando el puntero del ratón sobre el elemento. Así que, por ejemplo, el siguiente código subraya los enlaces cuando pasas el puntero del ratón sobre ellos:
a:hover {
text-decoration: underline;
}Los selectores CSS se han vuelto cada vez más sofisticados desde la introducción de CSS3 hace más de una década. Este tutorial discute tres selectores pseudo-clase recientes que apuntan a elementos según su estado.
Selector :is
Los selectores que apuntan a diferentes elementos con los mismos estilos pueden llevar a un CSS redundante. En este ejemplo, el texto del párrafo <p> se establece en negro por defecto, pero cualquier <p>dentro de un <main>, <header> o <footer> se vuelve verde:
/* default */
p {
color: black;
}
/* <p> in <main>, <header>, or <footer> */
main p,
header p,
footer p {
color: green;
}Podrías utilizar SASS y preprocesadores CSS similares, que permiten el anidamiento:
main, header, footer {
p {
color: green;
}
}Esto crea código CSS idéntico y reduce el esfuerzo de escritura, pero:
- Requiere una herramienta de construcción CSS. El anidamiento nativo de CSS está en camino, pero no recibirá un buen soporte en los navegadores hasta 2023 o más tarde.
- El anidamiento introduce su propio conjunto de problemas. Los selectores profundamente anidados son difíciles de leer y pueden generar CSS innecesariamente largo.
La pseudo-clase :is proporciona una solución nativa de CSS:
:is(main, header, footer) p {
color: green;
}:is() tiene soporte completo en todos los navegadores modernos, excepto Internet Explorer.
Get fito dac’s stories in your inbox
Join Medium for free to get updates from this writer.
Puedes utilizar cualquier cantidad de selectores :is() en cualquier lugar, y cada uno puede contener cualquier cantidad de otros selectores. El siguiente código colorea de rojo los elementos <h1>, <h2> y <p> que son hijos de un <section> con una clase de .primaryo .secondaryque no es el primer hijo de un <article>:
article section:not(:first-child):is(.primary, .secondary) :is(h1, h2, p) {
color: red;
}Necesitarías los siguientes seis selectores CSS sin usar :is():
article section.primary:not(:first-child) h1,
article section.primary:not(:first-child) h2,
article section.primary:not(:first-child) p,
article section.secondary:not(:first-child) h1,
article section.secondary:not(:first-child) h2,
article section.secondary:not(:first-child) p {
color: red;
}Ten en cuenta que :is() NO puede coincidir con pseudo-elementos como ::beforey ::after:
/* this fails */
p:is(::before, ::after) {
display: block;
content: 'pseudo';
}Puedes consultar este enlace con la lista completa de pseudo-clases de CSS que puedes utilizar en tus selectores.
Selector :where()
El selector pseudo-clase :where() tiene una sintaxis idéntica a :is(). Tiene el mismo nivel de soporte en los navegadores y a menudo producirá el mismo resultado:
:where(main, header, footer) p {
color: green;
}La diferencia principal entre :is() y :where() radica en la especificidad:
:is()utiliza la especificidad del selector más específico en sus argumentos.:where()tiene una especificidad de cero.
Consideremos este HTML:
<main>
<p>main text</p>
</main>El texto se volverá verde al aplicar el siguiente CSS:
main p {
color: black;
}
:is(main, header, footer) p {
color: green;
}
:where(main, header, footer) p {
color: blue;
}El selector :is() tiene la misma especificidad que main p, pero se encuentra después en el orden, por lo que el texto será verde. El texto azul solo se aplicará cuando elimines tanto el selector main p como :is().
:where() tiene menos casos de uso que :is(), pero la especificidad cero puede ser útil para resetear estilos de CSS. Considera este reseteo que aplica un margen superior de 1em a los encabezados <h2> a menos que sean el primer hijo de un <main>:
/* reset */
h2 {
margin-block-start: 1em;
}
main :first-child {
margin-block-start: 0;
}Aplicar un margen superior personalizado para <h2> más adelante en el CSS no tiene efecto porque main :first-child tiene una especificidad más alta:
/* this has no effect */
h2 {
margin-block-start: 2em;
}Utilizar la especificidad cero de :where() significa que cualquier estilo de reseteo se puede anular sin recurrir a selectores adicionales o !important.
Selector :has()
El selector :has() utiliza una sintaxis similar a :is() y :where(), pero se enfoca en un elemento que contiene un conjunto de otros elementos. Es correcto: los desarrolladores web finalmente tienen una forma de apuntar a elementos padre, como todos los anclajes <a> que contienen una <img> o <div>:
/* styles applied to the <a> element */
a:has(img, div) {
border: 2px solid blue;
}Esto abre posibilidades que antes requerían JavaScript. Por ejemplo, puedes establecer el estilo de un <fieldset> exterior cuando algún campo interno requerido no es válido y deshabilitar cualquier botón de envío siguiente:
/* red border when any required inner field is invalid */
fieldset:has(:required:invalid) {
border: 3px solid red;
}
/* disable following submit button */
fieldset:has(:required:invalid) + button[type='submit'] {
opacity: 0.2;
pointer-events: none;
}Observa el selector de atributo utilizado como parte del segundo estilo en el ejemplo anterior, que seleccionará todos los botones con el atributo type configurado como “submit”.
:has() es más reciente que :is() y :where(). En el momento de escribir esto, tiene un soporte limitado en Safari 15.4+ y Chrome 105+, que se lanzaron a finales de 2022.
