Que signifie un «&» avant un pseudo dans CSS

Un "&«Avant qu'un pseudo-élément ne soit utilisé dans les déclarations imbriquées pour se référer à la classe parentale principale. Dans une déclaration imbriquée, il peut y avoir plusieurs «&”Symboles qui se réfèrent à la même classe principale. Cela signifie que le «&”Symbole avant un pseudo-élément indique que la classe ou le pseudo-élément particulier est l'enfant de la classe parentale principale.

Maintenant, la question qui se pose ici est quel est le but de l'utilisation du «&”Symbole lorsque les classes enfants peuvent utiliser le nom de la classe parent tout en se référant à la classe parent principale?

C'est parce que le «&»Le symbole réduit la complexité du code et augmente sa lisibilité du code. Lorsque le code est lu à des fins comme tester le code ou même lorsque l'utilisateur doit déboguer le code, il devient beaucoup plus facile pour quiconque de comprendre le flux. Il n'est pas nécessaire d'écrire les noms complets de la classe principale pour référence encore et encore, donc cela fait également gagner du temps.

Exemple 1: plusieurs classes d'enfants faisant référence à la classe principale

Normalement, lorsqu'il existe plusieurs classes enfants associées à une classe parentale principale, ils suivent la syntaxe ci-dessous:

.Parent: Child1
.Parent: Child2
.Parent: Child3

Dans l'extrait de code ci-dessus, il existe une classe de parents qui a trois classes enfants nommées «classe 1","classe2", et "classe3". Les trois classes enfants ont le nom de la classe parent écrite sur le côté gauche avec des colons entre les deux. Le même code lorsqu'il est écrit avec «&«Les symboles seront écrits comme les suivants:

.parent
&: Child1
&: Child2
&: Child3

Le nom de la classe parent a été remplacé par le «&”Symbole et cela compilera également exactement de la même manière que l'extrait de code précédent. Les deux extraits de code ci-dessus exécutent exactement de la même manière, mais le style de l'écriture est différent.

Exemple 2: Classes avec espacement

Nous voyons souvent aussi des classes écrites entre elles avec un espace entre eux. Voyons un exemple simple de deux classes avec un espace entre eux:

.classe 1 .classe2

Cela signifie que "classe2"Est l'enfant de"classe 1". Mais si nous utilisons un «&«(AmperSand) pour écrire le même code. Il sera écrit et compilé comme suit:

.classe 1
& .classe2

Exemple 3: Classes sans espacement

S'il n'y a pas d'espace entre «classe 1" et "classe2«, Cela ne signifie pas la même chose et sera compilé d'une manière différente:

.classe 1.classe2

Cela signifie que les éléments avec les deux classes «classe 1" et "classe2»Sont sélectionnés. Si nous voulons compiler le même code mais avec «&”Symbole, il sera écrit et compilé comme le suivant:

.classe 1
&.classe2

Cela résume l'utilisation de «&»(AmperSand) avant un pseudo élément dans CSS.

Conclusion

Un "&»(AmperSand) est utilisé avant un pseudo élément dans des déclarations imbriquées où il y a plusieurs classes parentales et enfants. "&"Est utilisé pour se référer à la classe parent principale sans avoir besoin d'écrire le nom de la classe parent encore et encore dans un code et de cette manière, il réduit la complexité du code et le rend plus compréhensible.