¿Qué significa un & antes de un pseudo elemento en CSS?

Un "Y"Antes de que se use un pseudo-elemento en las declaraciones anidadas para referirse a la clase principal. En una declaración anidada, puede haber múltiples "Y"Símbolos que se refieren a la misma clase principal. Esto significa que el "Y"El símbolo antes de un pseudoelemento indica que la clase en particular o el pseudo-elemento es el hijo de la clase principal.

Ahora, la pregunta que surge aquí es cuál es el propósito de usar el "Y"Símbolo cuando las clases de niños pueden usar el nombre de la clase principal mientras se refieren a la clase principal?

Esto es porque el "Y"El símbolo reduce la complejidad del código y aumenta su legibilidad del código. Cuando el código se lee para cualquier propósito, como probar el código o incluso cuando el usuario tiene que depurar el código, se vuelve mucho más fácil para cualquiera comprender el flujo. No hay necesidad de escribir los nombres completos de la clase principal como referencia una y otra vez, por lo que también ahorra tiempo.

Ejemplo 1: múltiples clases de niños que se refieren a la clase principal

Normalmente, cuando hay varias clases infantiles asociadas con una clase principal principal, siguen la sintaxis que se proporciona a continuación:

.Padre: Child1
.Padre: Child2
.Padre: Child3

En el fragmento de código anterior, hay una clase principal que tiene tres clases de niños nombradas como "clase 1","clase 2", y "Clase3". Las tres clases de niños tienen el nombre de la clase principal escrita en el lado izquierdo con colons en el medio. El mismo código cuando se escribe con "YLos símbolos se escribirán como los siguientes:

.padre
&: Child1
&: Child2
&: Child3

El nombre de la clase principal ha sido reemplazado por el "Y"Símbolo y esto también se compilará exactamente de la misma manera que el fragmento de código anterior. Ambos fragmentos de código anterior ejecutan exactamente de la misma manera, pero el estilo de escribirlos es diferente.

Ejemplo 2: Clases con espaciado

A menudo también vemos algunas clases escritas entre sí con un espacio entre ellos. Consideremos un ejemplo simple de dos clases con un espacio entre ellas:

.clase 1 .clase 2

Esto significa que "clase 2"Es el hijo de"clase 1". Pero si usamos un "Y"(Ampersand) escribir el mismo código. Se escribirá y compilará como el siguiente:

.clase 1
Y .clase 2

Ejemplo 3: Clases sin espaciar

Si no hay espacio entre "clase 1" y "clase 2“, No significará lo mismo y se compilará de una manera diferente:

.clase 1.clase 2

Esto significa que los elementos con ambas clases "clase 1" y "clase 2"Están seleccionados. Si queremos compilar el mismo código pero con "YSímbolo, se escribirá y compilará como el siguiente:

.clase 1
Y.clase 2

Esto resume el uso de "Y”(Ampersand) antes de un pseudo elemento en CSS.

Conclusión

Un "Y"(Ampersand) se usa antes de un pseudo elemento en declaraciones anidadas donde hay múltiples clases de padres e hijos. "Y"Se usa para referirse a la clase principal de los padres sin necesidad de escribir el nombre de la clase principal una y otra vez en un código y de esta manera, reduce la complejidad del código y lo hace más comprensible.