Le pseudo-class, che iniziano tutte con i due punti seguendo senza spazi l'elemento, permettono di aggiungere altre regole a specifici selettori senza dover aggiungere altri attributi class nel codice XHTML.
Pseudo-class del primogenito (first-child)
Questa regola definisce lo stile di tutti i paragrafi primogeniti.
Es.:
p:first-child { font-style: italic }
Questa regola definisce lo stile solo di dei paragrafi primogeniti contenuti nei div.
Es.:
div > p: first-child { font-style: italic }
Questa regola definisce lo stile di tutti i paragrafi primogeniti ma solo se all'interno vi è em.
Es.:
p: first-child em { font-weight: bold }
Gli pseudo elementi sono simili alle pseudo-class, ma sono considerati pseudo-elementi perchè si comportano come se fossero elementi quando invece non lo sono. Sono: :first-line, :first-letter, :before, :after
Pseudo-elemento di inizio riga (first-line)
Questa regola definisce lo stile di enfatizzazione della prima riga in questo caso di un paragrafo, ma si può applicare a qualunque elemento.
Es.:
p: first-line { color: #000; font-size: 100%; }
Questo pseudo-elemento ha un suo set di proprietà: background, clear, color, font, letter-spacing, line-height, text-decoration, text-shadow, text-transform, vertical-align, word-spacing.
Pseudo-elemento di capolettera (first-letter)
Questa regola definisce lo stile di enfatizzazione della prima lettera di un paragrafo, ma può essere applicato a qualunque elemento.
Es.:
p: first-letter { font-size: 120% }
Questo pseudo-elemento ha un suo set di proprietà: background, border, clear, color, float, font, line-height, margin, padding, text-decoration, text-shadow, text-transform, vertical-align.
Pseudo-elemento di contenuto (before)
Questa regola permette d'inserire nel documento un contenuto testuale (anche un url) o un'immagine non presente nello stesso. E questo contenuto viene inserito subito prima dell'elemento definito nel selettore.
Es.:
h1:before { content: url(immagine.gif); }
h1:before { content: "testo da inserire..."; }
h1#nome_id { content: "url(immagine.gif)"; }
h1#nome_id { content: "testo da inserire..."; }
h1#nome_class { content: "url(immagine.gif)"; }
h1#nome_class { content: "testo da inserire..."; }
Pseudo-elemento di contenuto (after)
Pseudo-elemento complementare a :before. L'unica differenza è che il contenuto viene inserito dopo l'elemento specificato nel selettore.
Es.:
h1:after { content: url(immagine.gif); }
h1:after { content: "testo da inserire..."; }
h1#nome_id { content: "url(immagine.gif)"; }
h1#nome_id { content: "testo da inserire..."; }
h1#nome_class { content: "url(immagine.gif)"; }
h1#nome_class { content: "testo da inserire..."; }
