Ente accreditato Regione Veneto n.4271

Il selettore :not() di CSS

Alcuni esempi pratici di utilizzo del selettore inverso

Pubblicato da Simone Baldassin // 6 luglio 2018 // 39 visualizzazioni

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

Not

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.

Not

E vediamo il risultato

Not

Tra le varie formule possibili possiamo usare:

Not

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.

Topic: , , ,

Send this to a friend