[CSS] Gli pseudo-elementi

Il linguaggio CSS esiste ormai da tempo. Risale al 1996 l’emanazione degli standard da parte del W3C. Da allora siamo riusciti a liberarci sempre di più dei contenuti intabellati, relegando l’uso di questo elemento a contenuti che per loro natura prevedono un’intabellazione. Tutto il resto può essere decorosamente vestito con regole che, seppur rigide, permettono di ottenere risultati sorprendenti.

Siamo soliti definire lo stile di un div, dei paragrafi, anche delle tabelle. Sono tutte direttive date ad un insieme definito di contenuti (x)html. Le proprietà assegnate verranno applicate alla totalità dell’elemento.

Esistono però gli pseudo-elementi. Così definiti perchè vengono applicati a parte di un elemento più grande:

• :first-letter
• :first-line
• :before
• :after

:first-letter

E’ possibile applicare uno stile specifico alla prima lettera di un elemento. Applicabile con efficacia se il primo carattere della sezione corrisponde a contenuto testuale. Se invece il primo carattere corrisponde ad un tag di apertura (come nel caso la prima cosa visualizzata nel paragrafo sia un’immagine) allora nei fatti risulterà inefficace.

p:first-letter{
   font-size:122px;
   color: #cccccc;
   float-left;
}

:first-line

Applica al primo rigo uno stile specifico. il primo rigo è calcolato considerando la reale visualizzazione delle righe da parte del client. Non dipende da un <br /> e si adatta automaticamente alle modalità di visualizzazione dell’utente.

p:first-line {
  color: #FF0000;
  text-decoration: underline;
  font-weight: bold;
  font-style: italic;
}

:before

Inserisce del contenuto prima dell’inizio dell’elemento a cui si riferisce.

p:before{
  content:url(‘smile.jpg’);
}

NB: non è supportato da Internet Explorer.

:after

Inserisce del contenuto alla fine dell’elemento a cui si riferisce.

p:after{
  content:url(‘smile.jpg’);
}

NB: non è supportato da Internet Explorer.

Tutti gli pseudo-elementi possono essere definiti anche per classi specifiche.

p.ClassName:first-letter{
 font-size: 122px;
 float:left;
 font-family: Arial;
}

Pagina di Esempio sui diversi pseudo-elementi.