CSS - Pseudo classi

Le pseudo-classi CSS vengono utilizzate per aggiungere effetti speciali ad alcuni selettori. Non è necessario utilizzare JavaScript o qualsiasi altro script per utilizzare questi effetti. Una semplice sintassi delle pseudo-classi è la seguente:

selector:pseudo-class {property: value}

Le classi CSS possono essere utilizzate anche con pseudo-classi -

selector.class:pseudo-class {property: value}

Le pseudo-classi più comunemente usate sono le seguenti:

Sr.No. Valore e descrizione
1

:link

Usa questa classe per aggiungere uno stile speciale a un collegamento non visitato.
2

:visited

Usa questa classe per aggiungere uno stile speciale a un link visitato.
3

:hover

Usa questa classe per aggiungere uno stile speciale a un elemento quando passi il mouse su di esso.
4

:active

Usa questa classe per aggiungere uno stile speciale a un elemento attivo.
5

:focus

Usa questa classe per aggiungere uno stile speciale a un elemento mentre l'elemento è attivo.
6

:first-child

Usa questa classe per aggiungere uno stile speciale a un elemento che è il primo figlio di un altro elemento.
7

:lang

Utilizzare questa classe per specificare una lingua da utilizzare in un elemento specificato.

Mentre si definiscono le pseudo-classi in un blocco <style> ... </style>, è necessario notare i seguenti punti:

  • a: hover DEVE venire dopo a: link e a: visitati nella definizione CSS per essere efficaci.

  • a: active DEVE venire dopo a: hover nella definizione CSS per essere efficace.

  • I nomi delle pseudo classi non fanno distinzione tra maiuscole e minuscole.

  • Le pseudo-classi sono diverse dalle classi CSS ma possono essere combinate.

La pseudo-classe: link

L'esempio seguente mostra come utilizzare la classe : link per impostare il colore del collegamento. I valori possibili potrebbero essere qualsiasi nome di colore in qualsiasi formato valido.

<html>
   <head>
      <style type = "text/css">
         a:link {color:#000000}
      </style>
   </head>

   <body>
      <a href = "">Black Link</a>
   </body>
</html>

Produrrà il seguente collegamento nero:

La pseudo-classe: visitata

Il seguente è l'esempio che dimostra come utilizzare la classe : visiting per impostare il colore dei collegamenti visitati. I valori possibili potrebbero essere qualsiasi nome di colore in qualsiasi formato valido.

<html>
   <head>
      <style type = "text/css">
         a:visited {color: #006600}
      </style>
   </head>

   <body>
      <a href = "">Click this link</a>
   </body>
</html>

Questo produrrà il seguente collegamento. Dopo aver fatto clic su questo collegamento, cambierà il suo colore in verde.

La pseudo-classe: hover

L'esempio seguente mostra come utilizzare la classe : hover per cambiare il colore dei collegamenti quando portiamo il puntatore del mouse su quel collegamento. I valori possibili potrebbero essere qualsiasi nome di colore in qualsiasi formato valido.

<html>
   <head>
      <style type = "text/css">
         a:hover {color: #FFCC00}
      </style>
   </head>

   <body>
      <a href = "">Bring Mouse Here</a>
   </body>
</html>

Produrrà il seguente collegamento. Ora porta il mouse su questo collegamento e vedrai che cambia il suo colore in giallo.

La: pseudo-classe attiva

L'esempio seguente mostra come utilizzare la classe : active per modificare il colore dei collegamenti attivi. I valori possibili potrebbero essere qualsiasi nome di colore in qualsiasi formato valido.

<html>
   <head>
      <style type = "text/css">
         a:active {color: #FF00CC}
      </style>
   </head>

   <body>
      <a href = "">Click This Link</a>
   </body>
</html>

Produrrà il seguente collegamento. Quando un utente fa clic su di esso, il colore diventa rosa.

La pseudo-classe: focus

L'esempio seguente mostra come utilizzare la classe : focus per modificare il colore dei collegamenti focalizzati. I valori possibili potrebbero essere qualsiasi nome di colore in qualsiasi formato valido.

<html>
   <head>
      <style type = "text/css">
         a:focus {color: #0000FF}
      </style>
   </head>

   <body>
      <a href = "">Click this Link</a>
   </body>
</html>

Produrrà il seguente collegamento. Quando questo collegamento viene messo a fuoco, il suo colore diventa arancione. Il colore cambia quando perde la messa a fuoco.

La pseudo-classe: first-child

La pseudo-classe : first-child corrisponde a un elemento specificato che è il primo figlio di un altro elemento e aggiunge uno stile speciale a quell'elemento che è il primo figlio di qualche altro elemento.

Per fare: il lavoro del primo figlio in IE <! DOCTYPE> deve essere dichiarato all'inizio del documento.

Ad esempio, per far rientrare il primo paragrafo di tutti gli elementi <div>, potresti usare questa definizione:

<html>
   <head>
      <style type = "text/css">
         div > p:first-child {
            text-indent: 25px;
         }
      </style>
   </head>

   <body>
   
      <div>
         <p>First paragraph in div. This paragraph will be indented</p>
         <p>Second paragraph in div. This paragraph will not be indented</p>
      </div>
      <p>But it will not match the paragraph in this HTML:</p>
      
      <div>
         <h3>Heading</h3>
         <p>The first paragraph inside the div. This paragraph will not be effected.</p>
      </div>
      
   </body>
</html>

Produrrà il seguente risultato:

La pseudo-classe: lang

La pseudo-classe del linguaggio : lang , consente di costruire selettori basati sull'impostazione della lingua per tag specifici.

Questa classe è utile nei documenti che devono fare riferimento a più lingue che hanno convenzioni diverse per determinati costrutti linguistici. Ad esempio, la lingua francese utilizza in genere le parentesi angolari (<e>) per le virgolette, mentre la lingua inglese utilizza le virgolette ("e").

In un documento che deve affrontare questa differenza, puoi usare la pseudo-classe: lang per modificare le virgolette in modo appropriato. Il codice seguente modifica il tag <blockquote> in modo appropriato per la lingua utilizzata:

<html>
   <head>
      <style type = "text/css">
         
         /* Two levels of quotes for two languages*/
         :lang(en) { quotes: '"' '"'  "'"  "'"; }
         :lang(fr) { quotes: "<<" ">>" "<" ">"; }
      </style>
   </head>
   
   <body>
      <p>...<q lang = "fr">A quote in a paragraph</q>...</p>
   </body>
</html>

I selettori: lang verranno applicati a tutti gli elementi nel documento. Tuttavia, non tutti gli elementi utilizzano la proprietà quotes, quindi l'effetto sarà trasparente per la maggior parte degli elementi.

Produrrà il seguente risultato: