Che cosa sono pseudo-classi in CSS e loro utilizzo.

Penso che avete gia visto qualche pseudo-classe e uno di questi puo essere :hover che si utilizza per cambiare lo stato (stile) di un elemento al momento del passagio del  puntatore del mous sopra di esso. Ma ci sono anche tanti altri e oggi vediamo di conoscerli. Hanno una cosa in comune  i nomi di pseudo-classi sono preceduti da due puntini (:)

Pseudo-classi indicano le caratteristiche dello stato del elemento in un certo momento o dopo una mossa  come esemio lo stato del link al tasto del mouse premuto, o che il link è stato gia visitato, etc. Essi non appaiono nel documento (guardando il codice sorgente di una pagina non li vedremo ) e non appartengono alla struttura del albero del documento cosi detto DOM (ad albero del documento appartengono solo gli elementi HTML).

Pseudo-classi seguono un seletore.

pseudo classe1

Markup di una pagina  HTML viene creato con  utilizzo di  elementi HTML. Per ogni elemento  HTML esiste uno stile CSS predefinito dal browser in uso, sono cosi detti stili del browser, come ad esempio le dimensioni di caratteri nelle intestazioni H1-H6, caratteri in grassetto, sottolineatura di collegamenti ipertestuali che di solito vengono anche colorati in blue. Questi stili predefiniti di browser posimo cambiare, non che aggiungere proprie utilizzando i fogli di stile css.

Sapiamo che per cambiare aspetto di qualche elemento sulla nostra pagina dobiamo prima selezionare questo elemento dal albero di DOM atraverso cosi detti seletori di CSS  come seletore del  tag, classe o  ID.  Ma cosa fare quando si desidera evidenziare con colore rosso ogni riga pari (0,2,4,6,8 e cosi via, proprio cosi il conteggio in html va dal 0 e non dal 1 come potresti pensare ) nella tabella? 

Prescrive  manualmente nel codice html classi per ogni riga  ci vorrà molto tempo e aumenterà in modo significativo il peso del codice html  della pagina. In una tale situazione ci vengono d'aiuto cosi detti pseudo-classi come per esempio :nth-child(even)   e se questo pseudo-classe è abbinato con il seletore del tag per esempio come  tr otteremo  tr:nth-child(even){background-color: red}  allora  ad ogni riga pari della nostra tabella come colore di sfondo sara assegnato colore rosso.

Nel processo di interazione dell'utente con la pagina HTML elementi possono avere e mostrare le caratteristiche dinamiche. Ad esempio, quando incontrimo un  link, creato con il tag  html <a> testo di collegamento </a> esso ha il suo stile iniziale, ma quando avvicino il mio puntatore del mouse per cliccare passa nello stato  a:hover, e invece se il link è stato gia visitato vine visualizzato in un altro modo, cambia di novo il suo stile perche è passato nello stato  a:visited. Questi cambiamenti dello stile  si chiamano dinamiche e si possono  ottenere solo mediante pseudo classi .

Così, usando pseudo classi  ( :) si puo  cambiare lo suo stile di un eleemnto in modo dinamico che  con le tecniche normali utilizzando selettori semplici - p {CSS-stili,} o loro combinazioni - h1 + p {CSS stili}.non si potrà fare

Pseudo-classi sono divise in statici, ad esempio :last-of-type , o dinamici, ad esempio :hover, vale a dire stili che appaiono nel processo di interazione dell'utente con una pagina web. I nomi di pseudo classi sono sensibili al registro. Alcuni pseudo classi non possono essere  usati insieme  con altre , mentre altri possono essere applicate simultaneamente ad un singolo elemento.

Tipi di  pseudo classi

1. Pseudo-classi dinamichi

:link - Forse una  pseudo classe che crea piu confusione. Non sono tutti gli elementi che si nascondono dietro il  tag <a> sono link? Beh, no se non hanno un attributo href. Questo pseudo classe puo essere aplicato  solo a quelli link che non sono stati ancora clicati.

:visited - Cambia aspetto visivo di  collegamenti che sono già stati visitati .

:hover –  cambia stile al momento del pasagio del puntatore del mouse sopra il link.

:focus - cambia aspetto di un collegamento o elemento quando esso entra in focus, questo stato e stato pensato per scegliere un elemento dalla tastiera con il taso TAB;

:active - cambia aspetto di un link  che si trova sotto il puntatore del mose con il tasto sinistro premuto . Di solito viene utilizzato per elemti  link ma puo essere usato anche per altri elementi.

animatedDude

video prevui

2.Pseudo calssi del interfaccia utente

Appartengono ad  elementi di un modulo(form).

:disabled  - viene utilizzato per la selezione e stilizzazione elementi disabilitati in un modulo  modulo ;

:enabled  - sceglie elementi non bloccati di un form per la loro modifica e stilizzazione ;

:checked  - viene usato per selezionare e stilizzare  elementi  <input type = "radio">, <input type="checkbox"> , così come gli elementi  <option> </ option>, che si trovano all'interno del <select> </ select>;

:indeterminate  - elementi radio e caselle di controllo(checkbox )  possono essere attivati o disattivati dall'utente. Alcuni di loro possono essere in uno stato indeterminato, e proprio a essi che si applica questo pseudo classe.

3. Pseudo-classi strutturali.

Pseudo-classi strutturali consentono di selezionare gli elementi sulla base delle informazioni, che  riflettono la struttura del documento e non può essere ottenuto con selettori semplici o loro combinazioni. Si inizia dal  l'elemento con indice 1.
:root – seleziona elemento radice del documento che è il tag <html>;
:nth-child() seleziona elementi sulla base della loro posizione nel'indice (nell'ordine della coda) all'interno del loro contenitore principale. opzioni::
li:nth-child(even) —ogni elemento del elenco con indice  2, 4, 6, 8, e ct.
li:nth-child(odd) — ogni elemento del elenco con indice 1, 3, 5, 7, e ct.
li:nth-child(3) — soltanto elementi con indice  3.
li:nth-child(an+b) — esempio li:nth-child(3n+1) scegliere il primo  (3*0 +1 = 1), quarto (3*1 +1 = 4), settimo (3*2 +1 = 7) ellementi e cosi via., valore del  n puo essere uguale a 0 ;

:nth-last-child () - elementi figli in base al loro indice all'interno del contenitore, e il conteggio va in ordine inverso, vale a dire, a partire dall'ultimo elemento.  Valore può essere positivo, negativo e le parole chiave even odd ;

:nth-of-type () - elementi dello stesso tipo sulla base dell'indice all'interno del contenitore, per esempio, img: nth-of-type (2n) {float: left;} stabilisce il flusso di altri elementi  al bordo sinistro di ogni immagine pari(come contegio) , con la condizione che esso non si trovano  in un altra unità;

:nth-last-of-type () - gli elementi dello stesso tipo sulla base del loro indice all'interno del contenitore, dall'ultimo al primo elemento;

:first-child - l'elemento che è il primo figlio di un altro elemento;

:last-child - l'ultimo elemento figlio di un altro elemento nel contenitore ;

:first-of-type - l'elemento che è il primo elemento nella lista degli elementi figlii dell'elemento genitore;

:last-of-type - l'elemento che è l'ultimo elemento della lista degli elementi figlii dell'elemento genitore;

:only-child  - l'elemento figlio, che è l'unico elemento figlio. Funziona in modo simile al: first-child :last-child o:nth-child (1) :nth-last-child (1), ma con una specificità inferiore;

:only-of-type - l'elemento, che è l'unico elemento di questo tipo per  un elemento genitore;

:empty - elemento che non contiene nessun elemento figlio.

la strutura di pseudo classi

4.  Pseudo-classe: target

Alcuni link puntano a una posizione all'interno di una risorsa o pagina . Questo tipo di collegamento termina con un segno di  # "griglia", seguito da un identificatore di ancora (detto identificatore di frammento), ad esempio http://ioeweb.it/css3-flexbox/#align-content. L'elemento con il frammento ID viene chiamato elemento di destinazione. Con questo pseudo-classe posiamo stilizzare elemento di destinazione al quale siamo arrivati cliccando un link sulla pagina , così come gli elementi, che si trovano nello stesso blocco e al premere il pulsante / link si sostituiscono o si spostato (ad esempio, CSS-slider) .

In questo esempio sotto, ad ogni immagine abbiamo attribuito un id, e ad ogni collegamento - corrisponde identificatore di ancoraggio. Cliccando sul link ogni immagine viene ingrandita  fino al arrivare alla sua grandezza originaria .

<div id="slideshow">
<img id="one" src="/flower-1.jpg">
<img id="two" src="/flower-2.jpg">
<nav>
  <a href="#one" class="current"></a>
  <a href="#two"></a>
</nav>
</div>

#slideshow img {transform: scale(0.2) ;}
#slideshow img:target {transform: scale(1);}

 Clica pulsanti sotto per vedere come funzionano pseudo-selettori dal esemio sopra

5. Pseudo-classe: lang ()

Questo pseudo-classe viene utilizzata quando il documento contiene paragrafi di testo in diverse lingue. Per aiutare al browser di distinguerli , al'elemento di testo viene aggiunto all'attributo lang con un codice della rispetiva  lingua, per esempio, lingua = "fr". Di conseguenza, questo elemento può essere stilizzato utilizzando il selettore p: lang (fr) {css stili}.

6. Pseudo-classe di negazione: not ()

Un seletore funzionale che puo asumere valori di semplici seletori e in seguito scegliere solo quelli elementi che non contengono  parametro di selezione specificato. Come valori  possono  essere seguenti:

selettori di elemento, ad esempio,:non (strong)

selettori di identificatore e di classe, per esempio, p:not(.text)

selettori  di pseudo classi , per esempio, ul:not(:first-child)

selettori di attributo, per esempio, input:not([type="checkbox"])

7. Combinazione di pseudo-classi

Nella stilizazione dei elementi e possibili utilizzo di combinazioni di varie pseudoclassi
esempio:

tr:nth-last-child(even):hover  - aggiunge lo stile ad ogni riga pari  della tabella al momento di passagio del puntatore mouse  (il conto va alla rovescia);

h2:not(:first-of-type):not(:last-of-type)  - aggiungere lo stile a tutti gli elementi di questo tipo, tra ne  il primo e l'ultimo elemento di questo tipo.

La tema e abbastanza difficile da comprendere cosi al volo ma con la pratica si riesce a capire di piu.

Letto 844 volte