Una variabile CSS viene definita sempre all'interno di un selettore CSS sia questo relativo una classe o a un oggetto. Il punto migliore per definire le variabili utili in tutto il foglio di stile è sicurametne il seletore html. Questo perchè le variabili CSS vengono automaticamente ereditate dai selettori di più alto livello quindi essendo il tag HTML il più alto nella gerarchia del DOM, tutti i nodi figli vedono le variabili definite nel selettore. All'occorrenza, i selettori figli possono anche ridefinire le variabili ereditate. Prendiamo il seguente esempio.
.parent { --myvar: 10px; } .child { --myvar: 20px; }
<div class="parent"> <div class="child"></div> <div></div> </div>
In questo esempio, il tag DIV con classe CSS parent ha la variabile myvar che esprime un valore di 10px; il tag DIV interno con classe child ha la variabile myvar con valore 20px; il tag DIV interno senza classe ha la variabile myvar con valore 10px perchè ereditata dal padre.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Eseguire attività basate su eventi con Azure Container Jobs
Utilizzare HiLo per ottimizzare le insert in un database con Entity Framework
Utilizzare la libreria Benchmark.NET per misurare le performance
Inizializzare i container in Azure Container Apps
Effettuare lo stream della risposta in ASP.NET Core tramite IAsyncEnumerable
Generare file PDF da Blazor WebAssembly con iText
Aggiungere interattività lato server in Blazor 8
Applicare il versioning ai nostri endpoint ASP.NET Core Minimal API
Creare moduli CSS in React
Short-circuiting della Pipeline in ASP.NET Core
Utilizzare le Cache API di JavaScript per salvare elementi nella cache del browser
Eseguire attività pianificate con Azure Container Jobs