Pseudo classi, pseudo elementi e selettori vari sono strumenti usati quotidianamente nei fogli di stile dai web developer per creare le formattazioni dei nostri siti web. Prima di addentrarci nel selettore inverso facciamo un ripassino utile di questi strumenti.
Pseudo classi
Come ben sappiamo queste pseudo classi vengono associate al marcatore a e si chiamano
- :link
- :visited
- :active
Pseudo classi generali
Associabili a più selettori selezionabili con effetto hover (la prima) e effetto click (la seconda)
- :hover
- :focus
Pseudo elementi generali
Permettono di assegnare del contenuto prima o dopo il selettore indicato
- ::before
- ::after
Pseudo elementi per i paragrafi
Permettono di modificare la prima lettera e la prima linea di un paragrafo
- ::first-line
- ::first-letter
Selettori di ereditarietà
Permettono di applicare uno stile differente al primo e ultimo elemento di una lista o agli elementi pari (even) o dispari (odd)
- :first-child
- :last-child
- :nth-child(even)
- :nth-child(odd)
E passiamo finalmente a richiamare degli esempi pratici del protagonista di questo articolo ovvero il selettore inverso :not. Questo selettore ci permette infatti di poter dare una formattazione ad un elemento che non possiede un determinato requisito.
Un classico esempio che troviamo in tutti i tutorial è quello sul marcatore p dove al secondo assegnamo una classe
Nel nostro foglio di stile definiamo che i tag p abbiano un colore blu e un margin-bottom di 15px e che tutti gli elementi ad esclusione (:not(.inverse)) di quelli con classe inverse abbiano l’underline e colore nero.
E vediamo il risultato
Tra le varie formule possibili possiamo usare:
Possiamo pertanto immaginare da soli, da bravi front-ender, le possibilità che questo selettore inverso ci consente di mettere sul piatto nei nostri progetti e con una discreta retro compatibilità.
Fatene buon uso.
Ancora nessun commento