CodeGym/Corsi/Frontend SELF IT/Combinazione di pseudoclassi

Combinazione di pseudoclassi

Disponibile

8.1 Concetti di base

Combinare pseudoclassi e pseudo-elementi in CSS ti consente di creare selettori potenti e flessibili per stilizzare gli elementi in base al loro stato, struttura e contenuto. Questo apre molte possibilità per creare stili complessi e dinamici, migliorando l'interfaccia utente e l'esperienza di navigazione nella pagina web.

Fondamenti della combinazione

Pseudoclassi

Le pseudoclassi sono indicate con un solo due punti (:) e vengono applicate agli elementi in base al loro stato o posizione. Ad esempio:

  • :hover — si applica quando il cursore passa sopra un elemento
  • :first-child — seleziona il primo figlio di un elemento genitore

Pseudo-elementi

Gli pseudo-elementi sono indicati con due punti (::) e vengono utilizzati per stilizzare parti degli elementi o per aggiungere contenuto. Ad esempio:

  • ::before — aggiunge contenuto prima dell'elemento
  • ::first-letter — stilizza la prima lettera di un elemento

Combinazione

Le pseudoclassi e gli pseudo-elementi possono essere combinati per creare selettori complessi che ti permettono di applicare stili agli elementi in base al loro stato e struttura.

Sintassi:

selettore:pseudoclasse::pseudo-elemento {
  proprietà: valori;
}

8.2 Combinazione per l'interattività

Esempio 1: Stilizzare la prima lettera al passaggio del mouse

In questo esempio, la prima lettera di un paragrafo viene ingrandita e colorata di rosso al passaggio del mouse sul paragrafo:

CSS
/* Stilizzare la prima lettera del paragrafo al passaggio del mouse */

p:hover::first-letter {
  font-size: 2em;
  color: #e74c3c;
}
HTML
<p>Hover over this paragraph to see the first letter change.</p>

Esempio 2: Aggiungere contenuto prima del link al focus

In questo esempio, un'icona viene aggiunta prima del link e colorata di blu quando il link riceve il focus:

CSS
/* Aggiungere un'icona prima del link al focus */

a:focus::before {
  content: "🔗 ";
  color: #3498db;
}

8.3 Combinazione per stilizzare la struttura

Esempio 3: Stilizzare il primo paragrafo all'interno di un div con contenuto aggiunto

In questo esempio, la prima riga del primo paragrafo all'interno di un div viene evidenziata in grassetto e colorata di verde:

CSS
/* Stilizzare la prima riga del primo paragrafo all'interno di un div */

div p:first-child::first-line {
  font-weight: bold;
  color: #2ecc71;
}

Esempio 4: Aggiungere un elemento decorativo dopo l'ultimo elemento della lista

In questo esempio, un elemento decorativo viene aggiunto dopo l'ultimo elemento della lista e colorato di rosso:

CSS
/* Aggiungere un elemento decorativo dopo l'ultimo elemento della lista */

ul li:last-child::after {
  content: "❦";
  display: inline-block;
  margin-left: 10px;
  color: #e74c3c;
}

8.4 Combinazione per condizioni complesse

Esempio 5: Stilizzare gli elementi pari della lista al passaggio del mouse

In questo esempio, gli elementi pari della lista ricevono uno sfondo grigio chiaro e un testo di colore blu al passaggio del mouse:

CSS
/* Stilizzare gli elementi pari della lista al passaggio del mouse */

ul li:nth-child(even):hover {
  background-color: #f0f0f0;
  color: #3498db;
}

Esempio 6: Stilizzare i link attivi già visitati

In questo esempio, i link che sono stati visitati e si trovano in stato attivo vengono colorati di arancione e sottolineati:

CSS
/* Stilizzare i link attivi già visitati */

a:visited:active {
  color: #e67e22;
  text-decoration: underline;
}

8.5 Esempio di implementazione completa

CSS
/* Stilizzare la prima riga del primo paragrafo all'interno di un div */

div p:first-child::first-line {
  font-weight: bold;
  color: #2ecc71;
}

/* Aggiungere un elemento decorativo dopo l'ultimo elemento della lista */

ul li:last-child::after {
  content: "❦";
  display: inline-block;
  margin-left: 10px;
  color: #e74c3c;
}

/* Stilizzare gli elementi pari della lista al passaggio del mouse */

ul li:nth-child(even):hover {
  background-color: #f0f0f0;
  color: #3498db;
}

/* Aggiungere un'icona prima del link al focus */

a:focus::before {
  content: "🔗 ";
  color: #3498db;
}

/* Stilizzare la prima lettera del paragrafo al passaggio del mouse */

p:hover::first-letter {
  font-size: 2em;
  color: #e74c3c;
}
HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Esempio di combinazione di pseudoclassi e pseudo-elementi</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <div>
      <p>Questo è il primo paragrafo all'interno del div.</p>
      <p>Questo è il secondo paragrafo all'interno del div.</p>
    </div>
    <ul>
      <li>Elemento della lista 1</li>
      <li>Elemento della lista 2</li>
      <li>Elemento della lista 3</li>
      <li>Elemento della lista 4</li>
    </ul>
    <a href="#">Link con icona al focus</a>
    <p>Passa sopra questo paragrafo per vedere l'effetto sulla prima lettera.</p>
  </body>
</html>
1
Compito
Frontend SELF IT,  livello 30lezione 3
Bloccato
La prima riga nel div
La prima riga nel div
1
Compito
Frontend SELF IT,  livello 30lezione 3
Bloccato
Elemento decorativo alla fine
Elemento decorativo alla fine
Commenti
  • Popolari
  • Nuovi
  • Vecchi
Devi avere effettuato l'accesso per lasciare un commento
Questa pagina non ha ancora commenti