MICHELEPISANI.IT

Guida di base ai CSS ver. 1 e 2

Gestire alcuni stati di elementi ed alcuni particolari contenuti

Le pseudo-classi e gli pseudo-elementi

Agosto 02
07:482014

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.


Tags
Condividi

Autore

Michele Pisani

Michele Pisani

Ho uno spiccato orientamento al problem-solving, se è troppo facile non mi diverto :)
Credo nella volontà e nel cambiamento perchè hanno fatto della mia passione il mio pane quotidiano.
Se devo descrivermi con una sola parola direi... "Concretezza", la mia stretta di mano è una garanzia.

0 Commenti

Non ci sono commenti

Nessuno ha ancora commentato questo articolo, fallo tu per primo!

Scrivi un Commento

Scrivi un Commento

Il tuo indirizzo email non sarà pubblicato.
I campi contrassegnati da un * sono obbligatori

Articoli e Argomenti correlati

Categorie popolari

Iscriviti alla mia newsletter

La tua e-mail con me sarà al sicuro.
Non fornirò mai le tue informazioni a nessuno!

Ultimi commenti

Michele Pisani

Grazie Paolo,
spero possa tornarti utile per i tuoi scopi.

Paolo

salve,mi interessa il progetto sensore gas ,per applicazioni in agricoltura.Vedremo gli …

Michele Pisani

Ciao Rossana,
strano problema, una domanda: continui a visualizzare entrambe le pagine o una …

Rossana

Ciao Michele, il mio problema è che Facebook non mi risponde. Mi è successo tre volte: faccio …