Utilizzare le pseudo classi is e has nei CSS

Mattepuffo's logo
Utilizzare le pseudo classi is e has nei CSS

Utilizzare le pseudo classi is e has nei CSS

Programmazione, HTML - CSS

I CSS sono pieni di pseudo classi che ci aiutano a scrivere codice più compatto e pullito.

Tra quelle più utili e meno usate ci sono is e has.

In questo articolo vediamo qualche esempio.

In pratica:

  • vogliamo che tutti i p nel main e nel footer abbiamo una regola in hover
  • e che nell'header solo il p con img abbiamo una regola

Ecco il codice completo:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Test</title>

    <style>
      :is(main, footer) p:hover {
        color: rebeccapurple;
        background-color: aquamarine;
      }

      header p:has(img) {
        background-color: aquamarine;
      }

    </style>

  </head>
  <body>

    <header>
      <p>
        <img src="https://picsum.photos/200" alt="test">
      </p>

      <p>SENZA IMMAGINE</p>
    </header>

    <main>
      <p>MAIN</p>
    </main>

    <footer>
      <p>FOOTER</p>
    </footer>

  </body>
</html>

Enjoy!

Condividi

Commentami!