GUIDA PAGINE WEB: CSS

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..."; }