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
Utilizzare database e servizi con gli add-on di Container App
Effettuare il deploy di immagini solo da container registry approvati in Kubernetes
Determinare lo stato di un pod in Kubernetes
Ottimizzare il mapping di liste di tipi semplici con Entity Framework Core
Eseguire un metodo asincrono dopo il set di una proprietà in Blazor 8
Eseguire una query su SQL Azure tramite un workflow di GitHub
Gestire undefined e partial nelle reactive forms di Angular
Migrare una service connection a workload identity federation in Azure DevOps
Autenticarsi in modo sicuro su Azure tramite GitHub Actions
Evitare la command injection in un workflow di GitHub
Eseguire query verso tipi non mappati in Entity Framework Core
Eseguire query manipolando liste di tipi semplici con Entity Framework Core