In molte occasioni desideri modificare un elemento del tuo sito Web con CSS, ma quando lo fai ti rendi conto che l'elemento non ha alcuna classe o identificatore.
Non preoccuparti, non tutto è perduto.
Grazie alle PseudoClassi possiamo fare molto di più di quanto immagini e in questo tutorial vedremo come farlo.
Tutto quello che vedremo in questo tutorial funziona per qualsiasi pagina che crei con HTML e CSS.
E nello specifico ovviamente vale per WordPress, infatti nei nostri esempi lo faremo in WordPress.
📺️ Videotutorial:
Iscriviti a un canale mi:
:first-of-type Modifica solo il primo elemento
Questa pseudo-classe ci consente di modificare solo il primo elemento del suo tipo tra un gruppo di elementi di pari livello.
Ora vedremo esempi concreti ma qui hai un aiuto molto bene su questa pseudoclasse.
La prima cosa che andremo a modificare è il primo elemento di un menu:
Normalmente quello che faccio quando voglio modificare qualcosa è entrare nell'ispettore elementi del mio browser (tasto destro -> Ispeziona) e controllare se l'elemento da modificare ha una classe o un identificatore:
L'elemento che voglio modificare ha un identificatore specifico, quindi non ho davvero bisogno di usare pseudo classi.
Ma immagina di averlo visto e che io non sappia che ha un identificatore 🙈
Modificherò quell'elemento come se quell'identificatore non esistesse.
Per utilizzare le pseudo-classi devo aggiungere la pseudo-classe preceduta da due punti:
#top-menu li:first-of-type {
margin-right: 140px;
}
E il risultato è:
Come possiamo vedere nello screenshot qui sopra c'è solo il margine destro applicato al primo elemento.
:last-of-type Modifica solo l'ultimo elemento
Allo stesso modo dell'esempio precedente possiamo modificare solo l'ultimo elemento.
Questa volta useremo :last-of-type nel modo seguente:
#top-menu li:last-of-type {
margin-right: 140px;
}
E il risultato sarebbe:
:nth-of-type Modifica l'elemento o gli elementi che desideriamo
Questa pseudo-classe è molto potente perché possiamo fare riferimento a qualsiasi elemento specifico che vogliamo o creare modelli per più elementi da selezionare.
Immaginiamo di dover modificare il secondo elemento del mio menu, per questo useremmo nth-of-type nel modo seguente:
#top-menu li:nth-of-type(2) {
margin-right: 140px;
}
Crea modelli con :nth-of-type su Even Elements
Se invece di fare riferimento a un elemento specifico vogliamo fare riferimento a un elemento ogni n elementi, lo faremmo in questo modo:
#top-menu li:nth-of-type(2n) {
margin-right: 140px;
}
E il Risultato sarebbe quello di applicare il margine al secondo e al quarto elemento:
Crea modelli con :nth-of-type su Odd Elements
Allo stesso modo possiamo riferirci agli elementi dispari nel modo seguente:
#top-menu li:nth-of-type(2n+1) {
margin-right: 140px;
}
E il risultato sarebbe:
Aggiungi modifiche CSS a WordPress
Abbiamo apportato modifiche CSS alla finestra di ispezione degli elementi. E questo è fantastico per testarlo, ma non appena aggiorniamo la pagina, le modifiche scompariranno poiché queste modifiche non vengono salvate all'interno del Web, ma nel nostro browser.
Per aggiungere le modifiche a WordPress ci sono molti modi, dalla modifica del file CSS del nostro template all'utilizzo dell'interfaccia stessa di WordPress.
Utilizzeremo l'interfaccia stessa di WordPress, per questo andiamo al menu Personalizza -> Aggiungi CSS aggiuntivo:
Clicchiamo e arriviamo alla schermata in cui dobbiamo aggiungere il CSS:
Bonus Track: aggiungi una pseudoclasse a un elemento figlio
Come abbiamo visto, queste Pseudo-Classi ci consentono di modificare facilmente elementi fratelli, cioè elementi che sono allo stesso livello.
Ma immaginiamo di voler cambiare il colore degli elementi dispari del nostro menu.
Il colore non è definito nell'elemento elenco (li) ma nell'elemento collegamento (a) che si trova all'interno dell'elemento elenco:
Se osserviamo l'ispettore elemento:
Se osserviamo da vicino, vediamo che non siamo riusciti a creare il modello nel modo seguente:
#top-menu li a:nth-of-type(2n+1) {
color: red;
}
Poiché ogni collegamento è in un li diverso, sarebbero tutti il primo elemento e cambierebbero tutti colore:
Quello che dovremmo fare è applicare il modello con la pseudo classe all'elemento li nel modo seguente:
#top-menu li:nth-of-type(2n+1) a {
color: red;
}
Risultato in ciò che volevamo davvero:
Come abbiamo visto, non è la fine del mondo se non abbiamo un identificatore o una classe.
Grazie alle pseudoclassi possiamo accedere a quasi tutti gli elementi del nostro HTML.
Spero vi sia piaciuto 😉