Programmazione Web » Css » Utilizzo delle pseudo-classi first-child e first-line
Utilizzo delle pseudo-classi first-child e first-line
Difficoltà:
Scritto da Michele Sassi
Sito Web: http://www.comefaccio.net 
Questo tutorial è stato letto 958 volte
Con questa lezione impareremo ad utilizzare due pseudo-classi dei Css. La prima che analizzeremo sarà :first-child (primo figlio), il cui compito è quello di trovare la prima occorrenza del tag specificato (<p> nel nostro caso) e di assegnarli le proprietà incluse nella dichiarazione tra parentesi graffe. Per realizzare l'effetto occorrerà inserire questo codice tra i tag head:
<style>
body {
color: #000000;
}
p:first-child {
color: #FF0000;
}
</style>
e successivamente quest'altra parte di codice (X)HTML dove vogliamo che il paragrafo appaia:
<p>Questo paragrafo verrà visualizzato tutto in rosso ma solo sui browser Gecko-based. Infatti l'effetto non sarà visibile su browser come MS IExplorer e Opera!</p>
Una nota negativa di questa pseudo-classe è che funziona solo sui browser Gecko-based. L'effetto non sarà infatti visibile su MS IExplorer ed Opera. Al contrario, è stato testato personalmente su Firefox e posso garantire che funziona perfettamente!
Passiamo ora alla pseudo-classe :first-line, il cui funzionamento è pressocchè uguale a quello già visto per :first-child. La differenza sta nel fatto che con :first-line possiamo modificare gli attributi della prima riga di ogni paragrafo presente nella pagina! Come per :first-child, anche per questa pseudo-classe va incollato il seguente codice tra i tag head:
body {
color: #000000;
}
p:first-line {
color: #FF0000;
}
</style>
e successivamente quest'altra parte nel body della pagina:
<p>In questo modo solo la prima riga di ogni paragrafo sarà in rosso. Per verificarlo potete copiare e incollare questo codice e visualizzare la pagina con un browser qualsiasi.</p>
<p>Questa pseudo-classe infatti funziona con tutti i browser e non solo con quelli Gecko-based. Anche in questo paragrafo sarà visualizzata in rosso solo la prima riga! Provatelo pure! </p>
N.B.: Le pseudo-classi :first-line e :first-child sono applicabili anche ad altri tag e non solo al tag <p> (usato nel nostro esempio)! Provate voi ad usarlo con il tag <div>, l'effetto desiderato sarà sempre lo stesso!
Aggiungi questo tutorial ai preferiti
