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!
css html where
Commentami!