Cosa significa un & prima di uno pseudo elemento in CSS

UN "E"Prima che uno pseudo-elemento venga utilizzato nelle dichiarazioni nidificate per fare riferimento alla classe principale principale. In una dichiarazione nidificata, può esserci più "E"Simboli che si riferiscono alla stessa classe principale. Questo significa che il "E"Simbolo prima di uno pseudo-elemento indica che la particolare classe o lo pseudo-elemento è il figlio della classe principale principale.

Ora, la domanda che sorge qui è qual è lo scopo di usare il "E"Simbolo quando le classi figlio possono utilizzare il nome della classe genitore mentre si riferisce alla classe principale principale?

Questo è perché il "E"Il simbolo riduce la complessità del codice e aumenta la sua leggibilità del codice. Quando il codice viene letto per uno scopo come testare il codice o anche quando l'utente deve eseguire il debug del codice, diventa molto più facile per chiunque comprendere il flusso. Non è necessario scrivere i nomi completi della classe principale per riferimento ancora e ancora, quindi risparmia anche tempo.

Esempio 1: più classi di bambini che si riferiscono alla classe principale

Normalmente, quando ci sono più classi di figli associate a una classe principale principale, seguono la sintassi indicata di seguito:

.genitore: child1
.genitore: child2
.genitore: child3

Nello snippet di codice sopra, c'è una classe genitore che ha tre classi di figli denominate "Classe1","Classe2", E "Classe3". Tutte e tre le classi di figli hanno il nome della classe genitore scritta sul lato sinistro con i colpi in mezzo. Lo stesso codice quando scritto con "E"I simboli saranno scritti come i seguenti:

.genitore
&: Child1
&: Child2
&: child3

Il nome della classe genitore è stato sostituito dal "E"Simbolo e questo compilerà anche esattamente allo stesso modo dello snippet del codice precedente. Entrambi gli snippet di codice sopra si eseguono esattamente allo stesso modo, ma lo stile di scriverli è diverso.

Esempio 2: classi con spaziatura

Spesso vediamo anche alcune lezioni scritte tra loro con uno spazio tra loro. Consideriamo un semplice esempio di due classi con uno spazio tra loro:

.Classe1 .class2

Ciò significa che "Classe2"È il figlio di"Classe1". Ma se usiamo un "E“(AMPERSAND) per scrivere lo stesso codice. Sarà scritto e compilato come segue:

.class1
E .class2

Esempio 3: classi senza spaziatura

Se non c'è spazio tra "Classe1" E "Classe2“, Non significherà lo stesso e verrà compilato in modo diverso:

.Classe1.class2

Ciò significa che gli elementi con entrambe le classi "Classe1" E "Classe2"Sono selezionati. Se vogliamo compilare lo stesso codice ma con "E"Simbolo, sarà scritto e compilato come segue:

.class1
E.class2

Questo riassume l'uso di "E"(AMPERSAND) Prima di uno pseudo elemento in CSS.

Conclusione

UN "E"(AMPERSAND) viene utilizzato prima di un elemento pseudo in dichiarazioni nidificate in cui vi sono più classi genitore e figlio. "E"Viene utilizzato per fare riferimento alla classe principale principale senza bisogno di scrivere il nome della classe principale ancora e ancora in un codice e in questo modo, riduce la complessità del codice e lo rende più comprensibile.