O que significa um & antes de um elemento pseudo no CSS

Um "&Antes de um pseudo-elemento ser usado nas declarações aninhadas para se referir à classe principal. Em uma declaração aninhada, pode haver múltiplos “&”Símbolos que se referem à mesma classe principal. Isso significa que o “&”Símbolo antes de um elemento pseudo-elemento indica que a classe ou pseudo-elemento em particular é o filho da classe pai principal.

Agora, a pergunta que surge aqui é qual é o objetivo de usar o “&”Símbolo quando as classes infantis podem usar o nome da classe pai enquanto se refere à classe pai principal?

Isso ocorre porque o “&”O símbolo reduz a complexidade do código e aumenta sua legibilidade do código. Quando o código é lido para qualquer final. Não há necessidade de escrever os nomes completos da classe principal para referência repetidamente, então também economiza tempo.

Exemplo 1: Múltiplas classes infantis referentes à classe principal

Normalmente, quando existem várias classes infantis associadas a uma classe pai principal, elas seguem a sintaxe dada abaixo:

.Pai: Child1
.Pai: Child2
.Pai: Child3

No trecho de código acima, há uma classe de pais que possui três classes infantis nomeadas como “classe 1","Classe2", e "Classe3”. Todas. O mesmo código quando escrito com “&”Os símbolos serão escritos como os seguintes:

.pai
&: Child1
&: Child2
&: Child3

O nome da classe pai foi substituído pelo “&”Símbolo e isso também será compilado exatamente da mesma maneira que o snippet de código anterior. Os dois trechos de código acima são executados exatamente da mesma maneira, mas o estilo de escrevê -los é diferente.

Exemplo 2: Aulas com espaçamento

Muitas vezes também vemos algumas aulas escritas entre si com um espaço entre eles. Vamos considerar um exemplo simples de duas classes com um espaço entre eles:

.classe 1 .Class2

Isso significa que "Classe2"É o filho de"classe 1““. Mas se usarmos um “&“(Ampersand) para escrever o mesmo código. Será escrito e compilado como o seguinte:

.classe 1
& .classe2

Exemplo 3: Classes sem espaçamento

Se não houver espaço entre “classe 1" e "Classe2“, Isso não significa o mesmo e será compilado de uma maneira diferente:

.classe 1.Class2

Isso significa que os elementos com as duas classes “classe 1" e "Classe2”São selecionados. Se queremos compilar o mesmo código, mas com “&”Símbolo, ele será escrito e compilado como o seguinte:

.classe 1
&.classe2

Isso resume o uso de “&”(Ampersand) antes de um elemento pseudo no CSS.

Conclusão

Um "&”(Ampersand) é usado antes de um elemento pseudo em declarações aninhadas, onde existem várias classes de pais e filhos. ““&”É usado para se referir à classe pai principal sem precisar escrever o nome da classe pai de novo e novamente em um código e, dessa maneira, reduz a complexidade do código e o torna mais compreensível.