Usare la CSS pseudo classe :where

La pseudo classe CSS :where seleziona gli elementi come se fosse una lista leggondo il DOM.

In pratica fa proprio ciò che ci si aspetta dalla parola :where (se usate i database sapete cosa intendo).

Vediamo un esempio partendo da questo HTML:

<header>
	<a href="">Link header</a>
</header>
<main>
	<a href="">Link main</a>
</main>
<footer>
	<a href="">Link footer</a>
</footer>

Adesso supponiamo di voler cambiare lo stile ai link; probabilmente faremo una cosa del genere:

/* REGOLA GLOBALE */
a {
	text-decoration: none;
}

header a:hover, main a:hover, footer a:hover {
	color: yellow;
	text-decoratíon: underline;
}

Ma possiamo compattare il codice così:

/* REGOLA GLOBALE */
a {
	text-decoration: none;
}

:where(header, main, footer) a:hover {
	color: yellow;
	text-decoratíon: underline;
}

Facciamo un altro esempio; abbiamo queste due liste:

<ol>
	<li>List Item 1</li>
	<li>List Item 2</li>
</ol>

<ol class="my_class">
	<li>List Item 1</li>
	<li>List Item 2</li>
</ol>

Adesso vogliamo cambiare lo stile alla lista che ha una classe CSS:

:where(ol[class]) {
	list-style-type: none;
}

Ovviamente le potenzialità di where non finiscono qui!

Enjoy!