Pseudo-elemento CSS

Cos'è un elemento pseudo-classe?

Gli elementi pseudo-classe CSS vengono utilizzati per impostare lo stile di parti specifiche dell'elemento.

Ad esempio, può essere utilizzato per:

  • Impostare lo stile della prima lettera e della prima riga dell'elemento
  • Inserire il contenuto prima o dopo il contenuto dell'elemento

Sintassi

Sintassi degli elementi pseudo-classe:

selector::pseudo-element {
  property: value;
}

Elemento pseudo-classe ::first-line

::first-line Gli elementi pseudo-classe vengono utilizzati per aggiungere stili speciali alla prima riga del testo.

Esempio di aggiunta di stili alla prima riga di tutti i segmenti <p> del testo:

Esempio

p::first-line {
  color: #ff0000;
  font-variant: small-caps;
}

Prova tu stesso

Attenzione:::first-line Gli elementi pseudo-classe si applicano solo agli elementi bloccanti.

Le seguenti proprietà si applicano agli elementi pseudo-classe ::first-line Elemento pseudo-classe:

  • Proprietà del carattere
  • Proprietà del colore
  • Proprietà di sfondo
  • word-spacing
  • letter-spacing
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • clear

Prendi notaSintassi a doppiopunto - ::first-line Confronto :first-line

Nel CSS3, il doppiopunto sostituisce la rappresentazione a singolo doppiopunto degli elementi pseudo-classe. Questo è un tentativo del W3C di distinguerePseudo-classeEElemento pseudo-classeTentativo.

Negli elementi pseudo-classe CSS2 e CSS1, i pseudo-classe e gli elementi pseudo-classe utilizzano la sintassi del singolo doppiopunto.

Per la retrocompatibilità, gli elementi pseudo-classe CSS2 e CSS1 accettano la sintassi del singolo doppiopunto.

Elemento pseudo-classe ::first-letter

::first-letter Gli elementi pseudo-classe vengono utilizzati per aggiungere stili speciali alla prima lettera del testo.

Esempio di impostazione della formattazione della prima lettera di tutti i segmenti <p> del testo:

Esempio

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}

Prova tu stesso

Attenzione:::first-letter Gli elementi pseudo-classe si applicano solo agli elementi bloccanti.

Le seguenti proprietà si applicano all'elemento pseudo-classe ::first-letter:

  • Proprietà del carattere
  • Proprietà del colore
  • Proprietà di sfondo
  • Proprietà del margine esterno
  • Proprietà del margine interno
  • Proprietà del margine
  • text-decoration
  • vertical-align (solo quando "float" è "none")
  • text-transform
  • line-height
  • float
  • clear

Pseudo-elementi e classi CSS

I pseudo-elementi possono essere combinati con classi CSS:

Esempio

p.intro::first-letter {
  color: #ff0000;
  font-size: 200%;
}

Prova tu stesso

L'esempio sopra mostrerà la prima lettera dei paragrafi con class="intro" in rosso e con caratteri di grandi dimensioni.

Pseudo-elementi multipli

Puoi anche combinare più pseudo-elementi.

Nell'esempio seguente, la prima lettera del paragrafo sarà rossa e la dimensione del carattere xx-large. Il resto della prima riga sarà blu e utilizzerà caratteri in minuscolo maiuscole. Il resto del paragrafo sarà con dimensione del carattere e colore predefiniti:

Esempio

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}
p::first-line {
  color: #0000ff;
  font-variant: small-caps;
}

Prova tu stesso

CSS - pseudo-elemento ::before

::before I pseudo-elementi possono essere utilizzati per inserire contenuti prima del contenuto dell'elemento.

Esempio seguente inserisce un'immagine prima del contenuto di ogni elemento <h1>:

Esempio

h1::before {
  content: url(smiley.gif);
}

Prova tu stesso

CSS - pseudo-elemento ::after

::after I pseudo-elementi possono essere utilizzati per inserire contenuti dopo il contenuto dell'elemento.

Esempio seguente inserisce un'immagine dopo il contenuto di ogni elemento <h1>:

Esempio

h1::after {
  content: url(smiley.gif);
}

Prova tu stesso

CSS - pseudo-elemento ::selection

::selection pseudo-elementi che corrispondono alla parte dell'elemento selezionata dall'utente.

Le seguenti proprietà CSS possono essere applicate a ::selection:

  • color
  • background
  • cursor
  • outline

Esempio seguente mostra il testo selezionato con sfondo giallo e testo rosso:

Esempio

::selection {
  color: red; 
  background: yellow;
}

Prova tu stesso

Tutti i pseudo-elementi CSS

Selettore Esempio Descrizione dell'esempio
::after p::after Inserisci il contenuto dopo ogni elemento <p>.
::before p::before Inserisci il contenuto prima di ogni elemento <p>.
::first-letter p::first-letter Seleziona la prima lettera di ogni elemento <p>.
::first-line p::first-line Seleziona la prima riga di ogni elemento <p>.
::selection p::selection Seleziona la parte dell'elemento selezionato dall'utente.

Tutte le pseudo-classe CSS

Selettore Esempio Descrizione dell'esempio
:active a:active Seleziona i link attivi.
:checked input:checked Seleziona ogni elemento <input> selezionato.
:disabled input:disabled Seleziona ogni elemento <input> disabilitato.
:empty p:empty Seleziona ogni elemento <p> senza figli.
:enabled input:enabled Seleziona ogni elemento <input> abilitato.
:first-child p:first-child Seleziona ogni elemento <p> che è il primo figlio del suo genitore.
:first-of-type p:first-of-type Seleziona ogni elemento <p> che è il primo figlio del suo genitore.
:focus input:focus Seleziona gli elementi <input> che hanno l'interfaccia attiva.
:hover a:hover Seleziona i link sugli quali il mouse è hover.
:in-range input:in-range Seleziona gli elementi <input> con valore nella gamma specificata.
:invalid input:invalid Seleziona tutti gli elementi <input> con valore non valido.
:lang(language) p:lang(it) Seleziona ogni elemento <p> con valore dell'attributo lang che inizia con "it".
:last-child p:last-child Seleziona ogni elemento <p> che è l'ultimo figlio del suo genitore.
:last-of-type p:last-of-type Seleziona ogni elemento <p> che è l'ultimo figlio del suo genitore.
:link a:link Seleziona tutti i link non visitati.
:not(selector) :not(p) Seleziona ogni elemento che non è <p>.
:nth-child(n) p:nth-child(2) Seleziona ogni elemento <p> che è il secondo figlio del suo genitore.
:nth-last-child(n) p:nth-last-child(2) Seleziona ogni elemento <p> che è il secondo figlio del suo genitore, contando dall'ultimo figlio.
:nth-last-of-type(n) p:nth-last-of-type(2) Selezionare ogni elemento <p> che è il secondo figlio dell'elemento genitore <p>, contando dall'ultimo figlio
:nth-of-type(n) p:nth-of-type(2) Selezionare ogni elemento <p> che è il secondo elemento di tipo <p> del suo genitore.
:only-of-type p:only-of-type Selezionare ogni elemento <p> che è l'unico elemento di tipo <p> del suo genitore.
:only-child p:only-child Selezionare l'elemento <p> che è l'unico figlio del suo genitore.
:optional input:optional Selezionare gli elementi <input> senza l'attributo "required".
:out-of-range input:out-of-range Selezionare gli elementi <input> con un valore al di fuori dell'intervallo specificato.
:read-only input:read-only Selezionare gli elementi <input> che hanno l'attributo "readonly".
:read-write input:read-write Selezionare gli elementi <input> senza l'attributo "readonly".
:required input:required Selezionare gli elementi <input> che hanno l'attributo "required".
:root root Selezionare l'elemento radice dell'elemento.
:target #news:target Selezionare l'elemento #news attivo (fare clic su un URL che contiene il nome dell'ancora).
:valid input:valid Selezionare tutti gli elementi <input> con un valore valido.
:visited a:visited Selezionare tutti i link visitati.