Pubblicato il 04/05/19 - aggiornato il  | Nessun commento :

Pseudo-classi e pseudo-elementi nel CSS3

Cosa sono le pseudo-classi e gli pseudo-elementi nel CSS e CSS3 e come usarli per personalizzare pagine web, blog e siti
Le pseudo-classi sono usate nel linguaggio CSS fin dalla sua prima stesura CSS1 e rappresentano un grosso aiuto per gli web designer che devono progettare pagine web o interi siti.

Le pseudo-classi differiscono dalle classi propriamente dette perché vengono create virtualmente dal browser quando si verificano determinati eventi. La più conosciuta è :hover che è usata per modificare l'aspetto di un oggetto al passaggio del cursore, per esempio un link con il tag a:hover. Chi avesse delle difficoltà a seguire questo post può scaricare il mio ebook gratuito Guida all'HTML e al CSS per avere le nozioni propedeutiche su questi linguaggi di markup.

La sintassi per la dichiarazione di una pseudo-classe è la seguente

selettore:pseudo-classe {dichiarazione;}

I nomi delle pseudo-classi sono preceduti dai due punti (:). Una pseudo-classe segue senza spazi il selettore e può essere associata a tutte le tipologie di selettore.. Alcuni esempi possono essere quelli mostrati qui di seguito:

a:link {color: red;}   /* Pseudo-classe con elemento semplice */
p a:link {color: blue;}  /* Pseudo-classe con selettore discendente */
a.classe1:hover {color: white;}  /* Pseudo-classe con selettore di classe */
#id1:hover {color: white;} /* Pseudo-classe con selettore di id */
input[type=text]:focus {background:green;} /* Pseudo-classe con selettore di attributo */

Un semplice esempio di come usare le pseudo-classi sta nella configurazione dell'aspetto dei link. I browser di default mostrano i link di colore blue e sottolineati. Possiamo forzare questa regola e impostare altri colori, aggiungere grassetto, corsivo, eliminare la sottolineatura, ecc...





PSEUDO-CLASSI DEI LINK


Per modificare l'aspetto iniziale di un link si usa la pseudo-classe a:link e, per impostare l'aspetto dinamico dei link, si usano le pseudo-classi a:visited e a:hover rispettivamente per il link che siano già stati aperti e per quelli che vengono puntati dal cursore. Per esempio questo codice

<style>
a:link {
  color: red;
  text-decoration: none;
  font-weight: bold;
}
a:visited {
  color: green;
}
a:hover {
  color: blue;
}
</style>
<a href="https://www.ideepercomputeredinternet.com">IpCeI</a><br/>
<a href="#">Link da aprire</a><br/>
<a href="#">Link puntato dal cursore</a></br/>

porta a questo risultato grafico



con diversi colori dei link a seconda che siano stati o meno visitati o puntati dal mouse. Tra le pseudo-classi dei link è possibile usare anche quella a:active che imposta l'aspetto del link nel momento del click da parte dell'utente.






PSEUDO-CLASSE FIRST-CHILD


Con la pseudo-classe :first-child possiamo selezionare e formattare un elemento che si trovi ad essere il primo elemento figlio di un altro. La sintassi da usare in questo caso è la seguente:

elemento:first-child {dichiarazioni;}

Per esempio questo codice di esempio

<style>
p:first-child {color: red;}
</style>
<p>Questo è il primo paragrafo che sarà colorato di rosso</p>
<p>Il secondo paragrafo e quello successivo prenderà il colore di default</p>

porterà a questo risultato

pseudo-classe-first-child

Ci sono molte altre pseudo-classi che possono essere usate con il CSS.





ELENCO DELLE PSEUDO CLASSI


Qui di seguito riporto alcune pseudo-classi con esempi di utilizzo.

ElementoEsempioDescrizione
:checked input:checked Seleziona gli elementi input checked
:disabled input:disabled Seleziona gli elementi input disabled
:empty p:empty Seleziona gli elementi <p> senza figli
:enabled input:enabled Seleziona gli elementi <input> enabled
:first-of-type p:first-of-type Seleziona ogni elemento <p> che sia il primo dei suoi genitori
:focus input:focus Seleziona elemento <p> con il focus
:in-range input:in-range Seleziona elemento <input> con valore in un intervallo
:invalid input:invalid Seleziona elemento <p> con un valore invalido
:lang(language) p:lang(it) Seleziona elementi <p> con attributo lang(it)
:last-child p:last-child Seleziona ultimo figlio degli elementi <p>
:last-of-type p:last-of-type Seleziona tutti i <p> che sono gli ultimi dei loro genitori
:not(selector) :not(p) Seleziona tutti gli elementi che non hanno un <p>
:nth-child(n) p:nth-child(2) Seleziona gli elementi <p> che sono il secondo figlio dei genitori
nth-last-child(n) p:nth-last-child(2) Seleziona gli elementi <p> che sono il secondo figlio dei genitori contando a partire dall'ultimo
:nth-last-of-type(n) p:nth-last-of-type(2) Seleziona i secondi elementi che hanno <p> come genitori a partire dall'ultimo
:nth-of-type(n) p:nth-of-type(2) Seleziona gli elementi <p> che sono i secondi dei loro genitori
:only-of-type p:only-of-type Seleziona ogni elemento p che sia il solo figlio dei genitori
:only-child p:only-child Seleziona elemento <p> che sia il solo figlio dei suoi genitori
:read-only input:read-only Seleziona elemento <input> con valore in un intervallo
:invalid input:invalid Seleziona elemento <input> con attributo readonly
:read-write input:read-write Seleziona elemento <input> senza attributo readonly
:required input:required Seleziona elementi <input> con attributo required
:root root Seleziona gli elementi che sono documenti root
:target #news:target Seleziona elemento news attivo

Simili alle pseudo-classi sono i pseudo-elementi che si possono usare con il CSS3.

ELENCO DEGLI PSEUDO-ELEMENTI


Ecco l'elenco degli pseudo-elementi con la loro descrizione.

ElementoEsempioDescrizione
::after p::after Aggiunge contenuto dopo ciascun elemento p
::before p::before Aggiunge contenuto prima di ciascun elemento p
::first-letter p::first-letter Seleziona la prima lettera di ogni elemento p
::first-line p::first-line Seleziona la prima riga di ogni elemento p
::selection p::selection Seleziona la porzione di elemento p selezionata dall'utente

Qui di seguito vediamo alcune applicazioni degli pseudo-elementi.

APPLICAZIONI DEGLI PSEUDO ELEMENTI


Per esempio con questo codice

<style>
blockquote:before {
   content: open-quote;
}
blockquote:after {
   content: close-quote;
}
</style>
<blockquote>Testo di una citazione da mettere tra virgolette</blockquote>

si possono aggiungere le virgolette prima e dopo ogni citazione.

citazione-personalizzata

La sintassi per usare gli pseudo-elementi ::before e ::after prevede che quello che va mostrato prima o dopo il selettore venga inserito come attributo nel tag content. In linea generale la sintassi è la seguente:

selettore::pseudo-elemento {
   proprietà:valore;
}

Ecco un esempio di come usare gli pseudo-elementi per personalizzare i paragrafi con un codice come questo:

<style>
p:first-child:first-letter {
   font-size: 50px; padding:5px;
}
p:first-child:first-line {
   font-weight: bold;
}
</style>
<p>Aenean placerat. In vulputate urna eu arcu. Aliquam erat volutpat.</p>
<p> Suspendisse potenti. Morbi mattis felis at nunc. Duis viverra diam non justo. In nisl. Nullam sit amet magna in magna gravida vehicula. Mauris tincidunt sem sed arcu. Nunc posuere. Nullam lectus justo, vulputate eget, mollis sed, tempor sed, magna. </p>

che porta a questo risultato

personalizzazione-prima-lettera-primo-paragrafo

con la personalizzazione del capolettera e della prima riga di un testo. Gli pseudo-elementi come le pseudo-classi hanno la particolarità di essere fittizi o virtuali. Vengono create delle regole con cui sarà possibile formattare i documenti senza che ci siano dei CSS specifici nel codice della struttura della pagina. I codici sono stati testati con Editor HTML Online che mostrano il rendering di un codice da parte del browser. 




Nessun commento :

Posta un commento

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy