Gli ultimi tutorial di sviluppo web
 

CSS Gli pseudo-elementi

❮ Precedente Prossimo capitolo ❯

Quali sono gli pseudo-elementi?

Uno pseudo-elemento CSS viene utilizzato per parti di stile specificato di un elemento.

Ad esempio, può essere utilizzato per:

  • Lo stile la prima lettera, o una linea, di un elemento
  • Inserire contenuto prima, o dopo, il contenuto di un elemento

Sintassi

La sintassi di pseudo-elementi:

selector::pseudo-element {
    property:value;
}
Nota Si noti la doppia colon notazione - ::first-line contro :first-line

Il doppio colon ha sostituito la notazione a singolo colon per pseudo-elementi in CSS3. Questo è stato un tentativo da W3C di distinguere tra pseudo-classi e pseudo-elementi.

La sintassi single-colon è stato utilizzato per entrambe le pseudo-classi e pseudo-elementi in CSS2 e CSS1.

Per la compatibilità a ritroso, la sintassi singolo colon è accettabile per CSS2 e CSS1 pseudo-elementi.

Il ::first-line pseudo-elemento

Il ::first-line pseudo-elemento viene utilizzato per aggiungere uno stile speciale alla prima riga di un testo.

L'esempio seguente formatta la prima riga del testo in tutte le <p> elementi:

Esempio

p::first-line {
    color: #ff0000;
    font-variant: small-caps;
}
Prova tu stesso "

Nota: Il ::first-line pseudo-elemento può essere applicato solo a elementi block-level.

Le seguenti proprietà si applicano al ::first-line pseudo-elemento:

  • font
  • color
  • background
  • word-spacing
  • letter-spacing
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • clear

Il ::first-letter pseudo-elemento

Il ::first-letter pseudo-elemento è utilizzato per aggiungere uno stile particolare per la prima lettera di un testo.

L'esempio seguente formatta la prima lettera del testo in tutte le <p> elementi:

Esempio

p::first-letter {
    color: #ff0000;
    font-size: xx-large;
}
Prova tu stesso "

Nota: Il ::first-letter pseudo-elemento può essere applicato solo a elementi di blocco.

Le seguenti proprietà si applicano al ::first-letter pseudo- elemento:

  • font proprietà
  • color proprietà
  • background proprietà
  • margin proprietà
  • padding proprietà
  • border proprietà
  • text-decoration
  • vertical-align (solo se "float" è "none" )
  • text-transform
  • line-height
  • float
  • clear

Gli pseudo-elementi e classi CSS

Gli pseudo-elementi possono essere combinati con le classi CSS:

Esempio

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

L'esempio precedente visualizzerà la prima lettera dei paragrafi con class="intro" , in rosso e in una dimensione più grande.

Gli pseudo-elementi multipli

Diversi pseudo-elementi possono essere combinati.

Nel seguente esempio, la prima lettera di un paragrafo sarà rosso, in una dimensione di carattere xx-large. Il resto della prima riga sarà blu, in maiuscoletto. Il resto del paragrafo sarà la dimensione del font di default e colore:

Esempio

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

p::first-line {
    color: #0000ff;
    font-variant: small-caps;
}
Prova tu stesso "

CSS - L' ::before pseudo-elemento

La ::before pseudo-elemento può essere utilizzato per inserire alcuni contenuti prima che il contenuto di un elemento.

L'esempio seguente inserisce un'immagine prima che il contenuto di ogni <h1> elemento:

Esempio

h1::before {
    content: url(smiley.gif);
}
Prova tu stesso "

CSS - L' ::after pseudo-elemento

L' ::after pseudo-elemento può essere utilizzato per inserire alcuni contenuti dopo che il contenuto di un elemento.

L'esempio seguente inserisce un'immagine dopo che il contenuto di ogni <h1> elemento:

Esempio

h1::after {
    content: url(smiley.gif);
}
Prova tu stesso "

CSS - La ::selection pseudo-elemento

La ::selection pseudo-elemento corrisponde alla porzione di un elemento selezionato da un utente.

Le seguenti proprietà CSS possono essere applicati a ::selection : color , background , cursor , e outline .

L'esempio seguente rende il rosso testo selezionato su uno sfondo giallo:

Esempio

::selection {
    color: red;
    background: yellow;
}
Prova tu stesso "

Mettiti alla prova con esercizi!

Esercizio 1 » Esercizio 2» Esercizio 3 »

Tutti i CSS Pseudo elementi

Selettore Esempio descrizione esempio
::after p::after Inserire qualcosa dopo che il contenuto di ogni elemento <p>
::before p::before Inserire qualcosa prima che il contenuto di ogni <p> elemento
::first-letter p::first-letter Seleziona la prima lettera di ogni <p> elemento
::first-line p::first-line Seleziona la prima riga di ogni <p> elemento
::selection p::selection Seleziona la porzione di un elemento selezionato da un utente

Tutte le classi CSS Pseudo

Selettore Esempio descrizione esempio
:active a:active Seleziona il collegamento attivo
:checked input:checked Seleziona ogni verificato <input> elemento
:disabled input:disabled Seleziona ogni disabilitato <input> elemento
:empty p:empty Seleziona ogni <p> elemento che non ha figli
:enabled input:enabled Seleziona ogni abilitato <input> elemento
:first-child p:first-child Seleziona ogni <p> elementi che è il primo figlio del suo genitore
:first-of-type p:first-of-type Seleziona ogni <p> elemento che è il primo <p> elemento del suo genitore
:focus input:focus Seleziona il <input> elemento che ha il focus
:hover a:hover Seleziona link al passaggio del mouse
:in-range input:in-range Seleziona <input> elementi con un valore all'interno di un intervallo specificato
:invalid input:invalid Seleziona tutti <input> elementi con un valore non valido
:lang(language) p:lang(it) Seleziona ogni <p> elemento con un valore di attributo lang inizia con "it"
:last-child p:last-child Seleziona ogni <p> elementi che è l'ultimo figlio del suo genitore
:last-of-type p:last-of-type Seleziona ogni <p> elemento che è l'ultimo <p> elemento del suo genitore
:link a:link Seleziona tutti i collegamenti non visitati
:not(selector) :not(p) Seleziona ogni elemento che non è un <p> elemento
:nth-child(n) p:nth-child(2) Seleziona ogni <p> elemento che è il secondo figlio del suo genitore
:nth-last-child(n) p:nth-last-child(2) Seleziona ogni <p> elemento che è il secondo figlio del suo genitore, contando dall'ultimo bambino
:nth-last-of-type(n) p:nth-last-of-type(2) Seleziona ogni <p> elemento che è il secondo <p> elemento del suo genitore, contando dall'ultimo bambino
:nth-of-type(n) p:nth-of-type(2) Seleziona ogni <p> elemento che è il secondo <p> elemento del suo genitore
:only-of-type p:only-of-type Seleziona ogni <p> elemento che è l'unico <p> elemento del suo genitore
:only-child p:only-child Seleziona ogni <p> elemento che è l'unico figlio del suo genitore
:optional input:optional Seleziona <input> elementi senza "required" l'attributo
:out-of-range input:out-of-range Seleziona <input> elementi con un valore al di fuori di un intervallo specificato
:read-only input:read-only Seleziona <input> elementi con una "readonly" attributo specificato
:read-write input:read-write Seleziona <input> elementi con nessun "readonly" attributo
:required input:required Seleziona <input> elementi con una "required" attributo specificato
:root root Seleziona elemento radice del documento
:target #news:target Seleziona la corrente attiva #news elemento (cliccato su un URL che contiene quel nome ancora)
:valid input:valid Seleziona tutti <input> elementi con un valore valido
:visited a:visited Seleziona tutti i link visitati

❮ Precedente Prossimo capitolo ❯