Le pseudo-classi e gli pseudo-elementi

Le pseudo-classi sono molto importanti nell'utilizzo dei CSS ed hanno la funzione di associare particolari regole ad elementi nella pagina quando subiscono una sorta di evento che può essere ad esempio il click oppure il passaggio del mouse e ad elementi che subiscono una variazione di stato come elementi che tengono il focus o link che sono già stati visitati.
La seguente porzione di codice racchiude tutte le pseudo-classi del CSS:

<style type="text/css">
  a:link {color:#000000}
  a:visited {color:#AAAAAA}
  input[type=button]:hover{border:solid 2px #0000AA}
  input[type=button]:active{background-color:#888888}
  input[type=button]:focus{border:solid 2px #AA0000}  
  div#contenitore p:first-child {background-color:#00FFFF}
  p#tparag:first-letter{font-weight:bold}
  p#qparag:first-line{font-style:italic}
  #testo:after{content: " <-- testo scritto dopo"}
  #testo:before{content: "testo scritto prima --> "}
</style>
<div id="contenitore">
  <p>Primo paragrafo figlio</p>
  <p>Secondo paragrafo figlio</p>
  <div>
    <a href="#1">Link di prova 1</a>
    <a href="#2">Link di prova 2</a>
    <input type="button" value="Bottone" />
  </div>
  <p id="tparag">Terzo paragrafo</p>
  <p id="qparag">Quarto paragrafo riga 1<br />Quarto paragrafo riga 2</p>
  <p><span id="testo">Testo presente</span></p>
</div>

Le pseudo-classi, come intuibile, si assegnano con il simbolo del due punti ":" ed il nome della pseudo-classe di interesse che può essere :link, :visited, :first-child, :hover, :active e :focus.
Le pseudo-classi :link e :visited sono riservate ai link e servono per cambiarne lo stile relativamente ai link non visitati (dove non abbiamo ancora fatto click) ed a quelli già visitati, nell'esempio evidenziato da un cambio di colore del testo del link.

Un'assegnazione di un bordo colorato viene dato al bottone al passaggio del mouse su di esso con :hover e un altro colore del bordo se il bottone ha il focus (con la pseudo-classe :focus); mentre quando lo stesso bottone viene cliccato, dal momento del clic fino al suo rilascio, il suo colore di fondo assume un'altra gradazione di grigio grazie ad :active.

L'esempio mostra inoltre tutta una serie di pseudo-elementi applicabili con la stessa sintassi e che troviamo al primo paragrafo figlio del contenitore a cui è stato assegnato con :first-child un colore di background, mentre avendo applicato lo pseudo-elemento :first-letter al terzo paragrafo assegnando la regola font-wight:bold, la prima lettera del testo in esso contenuto è diventata in grassetto.
Con :first-line facciamo in modo che solo la prima riga dell'elemento, a cui lo pseudo-elemento è assegnato, subisca la relativa regola.
Con :after e :before è invece possibile aggiungere testo che in realtà non si trova a livello di HTML ma che è dichiarato nella proprietà content del relativo selettore.