Bentornati a tutti.
Oggi parleremo molto brevemente di pseudo classi ed elementi.
Quindi abbiamo lavorato con diversi tipi di elementi durante l'intero corso,
e come possiamo strutturarli e modellarli.
Bene, gli pseudo elementi sono un po 'diversi dalle altre cose
che abbiamo visto prima in quanto dipendono molto dalla struttura DOM, e
alcuni di essi sono in realtà popolati dinamicamente.
Quindi, ad essere onesti, hai visto questo prima quando abbiamo parlato di
link di stile perché i collegamenti avevano quei diversi stati.
Un esempio che abbiamo usato è stata l'idea di hover.
Se passi il mouse su un link, puoi cambiare lo stile per eliminare forse la sottolineatura o
cambiare il colore.
Quindi, parliamo di alcuni di questi diversi tipi di pseudo-classi oltre a
ciò che puoi fare con un solo link.
Ho iniziato con quello che abbiamo visto prima.
Puoi avere un link e anche un link che è stato visitato.
È inoltre possibile reagire a diverse azioni dell'utente.
Quindi, se qualcuno passa il mouse su un paragrafo o
passa il mouse su un tag H1, puoi comunque reagire ad esso.
Non deve essere solo un collegamento.
Puoi anche avere attivo, e
attivo è quando tieni premuto il pulsante del mouse su una sorta di elemento.
E l'ultima è messa a fuoco.
Focus sarebbe quando qualcuno sta tabulando attraverso la pagina
è possibile mettere a fuoco su ciascuno di questi.
Infine, uno che ha molto senso e probabilmente hai visto prima
è che puoi comporre le pseudo-classi di forme o interfacce.
Se la casella di controllo è stata selezionata o
selezionata, è possibile notare che a volte la rendono gialla.
O se sei mai stato in un sito e non ti è permesso digitare qualcosa
fino a quando non digiti qualcosa in una casella sopra, più in alto, tendono a grigio fuori.
Quindi il modo in cui faresti questo e' che potresti dire, sai una cosa?
Se qualcuno passa sopra il mio paragrafo, voglio solo fare un confine.
Bordo: 1 px.
Ora, anche se non c'è posto sul DOM in cui hanno p: hover,
dovrebbe funzionare per te quando inserisci quella regola di stile in.
Quindi, puoi anche stilare in base alla posizione strutturale
dei diversi elementi.
Hai il primogenito, l'ultimo figlio, l'ennesima.
Il modo in cui si lavora è mettere un numero per dire il quinto figlio o
il decimo figlio.
Puoi avere solo un figlio.
Hai anche altre cose diverse come primo di tipo, ultimo di tipo,
solo di tipo.
E ancora, hai solo l'elemento, i due punti e
poi il nome della pseudo-classe che vuoi modellare. Gli
pseudo elementi non fanno necessariamente parte del DOM, ma
possono essere utilizzati per modellare parti specifiche o univoche della pagina.
Quindi, alcuni esempi potrebbero se si dispone di un paragrafo e si desidera inserire quella
prima lettera fantasia con un carattere diverso, è possibile utilizzare la prima lettera pseudo elemento.
Lo stesso con la prima riga, puoi generare cose da mostrare prima o
dopo gli elementi.
Un sacco di volte se si sta styling qualcosa come le informazioni della carta di credito,
si può andare avanti e mettere nei diversi tipi di carte di credito, ma
avere un po 'prima che dice, e hey, mettere una foto qui.
Puoi anche modellare solo frammenti di selezioni diverse.
Ora non ti ho dato molto codice quando siamo passati qui perché usare davvero
pseudo classi e pseudo elementi è molto unico per la pagina che stai per creare.
Quindi più tardi quando parliamo di tabelle, tieni d'occhio perché userò
molte pseudo classi e pseudo elementi lì.
E' molto importante capire che non saro' in grado di coprire
ogni combinazione di tutto cio' che impariamo.
Ma voglio darti gli strumenti in modo che tu possa uscire e
indagare su come puoi aggiungere alcuni nuovi stili alla tua pagina.
Buona fortuna.