What Does an “&” Before a Pseudo Element in CSS Mean

An “&” before a pseudo-element is used in the nested statements to refer to the main parent class. In a nested statement, there can be multiple “&” symbols that refer to the same main class. This means that the “&” symbol before a pseudo-element indicates that the particular class or pseudo-element is the child of the main parent class.

Now, the question that arises here is what is the purpose of using the “&” symbol when child classes can use the name of the parent class while referring to the main parent class?

This is because the “&” symbol reduces the complexity of the code and increases its readability of the code. When the code is read for any purpose like testing the code or even when the user has to debug the code, it becomes a lot easier for anyone to understand the flow. There is no need to write the full names of the main class for reference again and again, so it also saves time.

Example 1: Multiple Child Classes Referring to the Main Class

Normally, when there are multiple child classes associated with a main parent class, they follow the syntax given below:

In the above code snippet, there is a parent class that has three child classes named as “class1”, “class2”, and “class3”. All three child classes have the name of the parent class written on the left side with colons in between. The same code when written with “&” symbols will be written as the following:

The name of the parent class has been replaced by the “&” symbol and this will also compile exactly the same way as the previous code snippet. Both the above code snippets execute exactly the same way but the style of writing them is different.

Example 2: Classes With Spacing

We often also see some classes written with each other with a space in between them. Let’s consider a simple example of two classes with a space in between them:

This means that “class2” is the child of “class1“. But if we use an “&“(ampersand) to write the same code. It will be written and compiled as the following:

Example 3: Classes Without Spacing

If there is no space between “class1” and “class2“, it will not means the same and will be compiled in a different way:

This means that the elements with both the classes “class1” and “class2” are selected. If we want to compile the same code but with “&” symbol, it will be written and compiled as the following:

This sums up the use of “&” (ampersand) before a pseudo element in CSS.

Conclusion

An “&” (ampersand) is used before a pseudo element in nested statements where there are multiple parent and child classes. “&” is used to refer to the main parent class without needing to write the name of the parent class again and again in a code and in this way, it reduces the complexity of the code and makes it more understandable.