it.hideout-lastation.com
Paradiso Per Designer E Sviluppatori


La guida definitiva alle pseudo-classi CSS

Se sei un principiante o uno sviluppatore CSS esperto, probabilmente hai sentito parlare di pseudo-classi . La pseudo-classe più conosciuta è probabilmente :hover, che ci consente di disegnare un elemento quando è nello stato hover, cioè quando viene puntato un dispositivo puntatore, come un mouse.

Seguendo il concetto dei nostri post precedenti sul margine: auto e CSS Floats, diamo un'occhiata più approfondita alle pseudo-classi in questo post. Vedremo cosa sono realmente le pseudo-classi, come funzionano, come possiamo classificarle e come sono diverse dagli pseudo-elementi .

Quali sono le pseudo-classi?

Una pseudo-classe è una parola chiave che possiamo aggiungere ai selettori CSS per definire uno stato speciale dell'elemento HTML di appartenenza. Possiamo aggiungere una pseudo-classe a un selettore CSS usando la sintassi del colon : come questo: a:hover{ ... }

Una classe CSS è un attributo che possiamo aggiungere agli elementi HTML per cui vogliamo applicare le stesse regole di stile, come voci di menu in alto o titoli di widget della barra laterale. In altre parole, possiamo usare le classi CSS per raggruppare o classificare elementi HTML che sono simili in un modo o nell'altro.

Le pseudo-classi sono simili a loro nel senso che sono anche usate per aggiungere regole di stile agli elementi che condividono la stessa caratteristica .

Ma mentre le classi autentiche sono definite dall'utente e possono essere individuate nel codice sorgente, per esempio

, le pseudo-classi vengono aggiunte da UA (user agent), come i browser Web, in base allo stato corrente dell'elemento HTML di appartenenza.

Scopo delle Pseudo-Classi

Il compito delle normali classi CSS è classificare o raggruppare elementi . Gli sviluppatori sanno come devono essere raggruppati i loro elementi: possono formare classi come "voci di menu", "pulsanti", "miniature", ecc. Per raggruppare e in seguito definire elementi simili. Queste classificazioni si basano sulle caratteristiche degli elementi fornite dagli sviluppatori stessi .

Ad esempio, se uno sviluppatore decide di utilizzare a

come un oggetto miniatura lei o lui può classificarlo
con una classe "miniatura".

[...]

Gli elementi HTML hanno tuttavia le loro caratteristiche comuni in base al loro stato, posizione, natura e interazione con la pagina e l'utente. Queste sono le caratteristiche che non sono tipicamente contrassegnate nel codice HTML, ma possiamo indirizzarle con pseudo-classi nei CSS, ad esempio:

  • un elemento che è l' ultimo figlio all'interno del suo elemento genitore
  • un link che viene visitato
  • un elemento che è diventato a schermo intero .

Questi sono il tipo di caratteristiche che sono generalmente prese di mira dalle pseudo classi. Per comprendere meglio la differenza tra classi e pseudo-classi, supponiamo di utilizzare la classe .last per identificare gli ultimi elementi in diversi contenitori principali.

  • articolo 1
  • elemento 2
  • articolo 3
  • articolo 4

Possiamo modellare questi ultimi elementi figlio con il seguente CSS:

 li.last {text-transform: maiuscolo; } option.last {font-style: italic; } 

Ma cosa succede quando l'ultimo elemento cambia? Bene, dovremo spostare la classe .last dall'ultimo elemento precedente a quello attuale.

Questa seccatura di aggiornamento delle classi può essere lasciata all'agente utente, almeno per quelle caratteristiche che sono comuni tra gli elementi (e l'essere un ultimo elemento è il più comune possibile). Avere una pre-definita :last-child pseudo-classe :last-child è davvero molto utile. In questo modo, non dobbiamo indicare l'ultimo elemento nel codice HTML, ma possiamo ancora modificarli con il seguente CSS:

 li: last-child {text-transform: maiuscolo; } opzione: last-child {font-style: italic; } 

Principali tipi di pseudo-classi

Esistono molti tipi di pseudo-classi, ognuna delle quali ci fornisce modi per scegliere gli elementi in base alle loro caratteristiche altrimenti inaccessibili o più difficili da accedere. Ecco un elenco di pseudo classi standard in MDN.

1. Pseudo-classi dinamiche

Le pseudo-classi dinamiche vengono aggiunte e rimosse dagli elementi HTML in modo dinamico, in base allo stato in cui vengono convertite in risposta alle interazioni dell'utente . Alcuni degli esempi di pseudo-classi dinamiche sono :hover :focus :hover :link e :visited, che possono essere aggiunti al tag anchor.

 a: visited {color: # 8D20AE; }. button: hover, .button: focus {font-weight: bold; } 

2. Pseudo-classi basate sullo stato

Le pseudo-classi basate sullo stato vengono aggiunte agli elementi quando si trovano in uno stato statico particolare . Alcuni dei suoi esempi più noti sono:

  • :checked che può essere applicato per le checkbox ( )
  • :fullscreen per scegliere come target qualsiasi elemento attualmente visualizzato in modalità schermo intero
  • :disabled per elementi HTML che possono essere in modalità disabilitata, come ,