Latest web development tutorials

CSS pseudo-elementi

CSS pseudo-elemento è utilizzato per aggiungere alcuni selettori effetti speciali.

grammatica

sintassi pseudo-elemento:

selector:pseudo-element {property:value;}

classi CSS possono anche utilizzare gli pseudo-elementi:

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

: First-line pseudo-elemento

"First-line" elemento pseudo viene utilizzato per impostare uno stile speciale alla prima riga di testo.

Nel seguente esempio, il browser sarà basato su pseudo-elemento "first-line" secondo lo stile della prima riga di testo in formato elementi p:

Esempi

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

Prova »

Nota: "prima linea" elemento pseudo può essere utilizzato solo per gli elementi a livello di blocco.

NOTA: Le seguenti proprietà possono essere applicate al pseudo-elemento "first-line":

  • proprietà dei font
  • proprietà di colore
  • proprietà dello sfondo
  • word-spacing
  • letter-spacing
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • chiaro

: First-letter pseudo-elemento

"Prima lettera" pseudo-elemento viene utilizzato per impostare uno stile speciale alla prima lettera del testo:

Esempi

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

Prova »

Nota: "first-letter" elemento pseudo può essere utilizzato solo per gli elementi a livello di blocco.

NOTA: Le seguenti proprietà possono essere applicate al pseudo-elemento "first-letter":

  • proprietà dei font
  • proprietà di colore
  • proprietà dello sfondo
  • proprietà dei margini
  • proprietà padding
  • proprietà del bordo
  • text-decoration
  • vertical-align (solo se "float" è "none")
  • text-transform
  • line-height
  • galleggiante
  • chiaro

Gli pseudo-elementi e classi CSS

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

p.article:first-letter {color:#ff0000;}

<p class="article">A paragraph in an article</p>

L'esempio sopra farà tutto classe come la prima lettera dell'articolo comma diventa rosso.

Gli pseudo-elementi multipli

Una pluralità di pseudo-elementi possono essere combinati per l'uso.

Nell'esempio seguente, il primo paragrafo della lettera sarà visualizzato in rosso, la dimensione del carattere è xx-large. La prima riga del resto del testo sarà maiuscolo blu, e piccoli.

I rimanenti paragrafi di testo nella dimensione del font di default e il colore di visualizzazione:

Esempi

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

Prova »

CSS -: prima di pseudo-elemento

"Prima" pseudo-elemento può inserire nuovo contenuto di fronte al contenuto dell'elemento.

Il seguente esempio inserire un'immagine davanti ad ogni elemento <h1>:

Esempi

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

Prova »

CSS -: dopo pseudo-elemento

": Dopo" pseudo-elemento può inserire il nuovo contenuto dopo il contenuto dell'elemento.

Gli esempi che seguono inserire una foto dopo ogni elemento <h1>:

Esempi

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

Prova »

Tutti i CSS pseudo-classi / elementi

selettore esempio esempio spettacoli
: Link a:link Selezionare tutti i collegamenti non visitati
: visited a:visited Selezionare tutti i link visitati
: attiva a:active Select è un collegamento attivo
: hover a:hover Mettere il mouse sul stato del collegamento
: focus input:focus Dopo aver selezionato l'elemento di input ha il focus
: First-letter p:first-letter Selezionare la prima lettera di ogni elemento <p>
: First-line p:first-line Selezionare la prima riga di ogni elemento <p>
: First-child p:first-child <] P> selettore elemento corrisponde a qualsiasi elemento appartenente al primo elemento figlio
: prima p:before Inserisci contenuto prima di ogni elemento <p>
: dopo p:after Inserisci contenuto dopo ogni <p> ​​elemento
: Lang (lingua) p:lang(it) lang selezione attributo <p> per un valore di partenza