why :root selector is used in css instead of universal selector (*)

The :root selector in CSS is used to select the root element of the document, which is typically the html element. This selector is often used to define global CSS variables that can be accessed and used throughout the document.

On the other hand, the * selector is a universal selector that selects all elements in the document. While it can be used to apply styles to all elements, it is generally not recommended to use it in this way.

Using the * selector to apply styles to all elements in a document can have performance implications because it forces the browser to evaluate the styles for every single element on the page, even if those styles are not needed. This can slow down the rendering of the page and cause unnecessary work for the browser.

In addition, using the * selector can unintentionally target elements that you didn't intend to style. This can be especially problematic if you are using styles that apply to all elements, such as setting a default font size or line height. In these cases, you may end up applying the styles to elements that you didn't intend to, which can result in unexpected and inconsistent styling throughout your document.

For these reasons, it is generally best to avoid using the * selector to apply styles to all elements in a document. Instead, it is recommended to use more targeted selectors that only apply to the elements that you want to style. Therefore, :root is preferred over * also when defining global variables in CSS because it is more specific and targeted to the root element of the document, which is where these variables are typically defined.

Examples on unintentionally targeting elements while using *

Here, are some more detailed examples of how using the * selector can unintentionally target elements:

1. Overriding styles: Let's say you want to set a default text color for all elements using the * selector like this:
   
   * { color: red; }
   
   This will apply the red text color to all elements on the page, including text inside buttons and links, which may not be what you want. If you had previously set a different text color on some elements using a more specific selector, like this:
   
   h1 { color: blue; }
   
   The * selector will override the blue text color and make all text red, even the headings.
2. Specificity issues: Let's say you want to set a default font size for all elements using the * selector like this:
   
   * { font-size: 16px; }
   
   This will apply the font size to all elements on the page, but it may be overridden by more specific selectors that target certain types of elements. For example, if you have this selector:
   
   h1 { font-size: 24px; }
   
   The h1 selector has a higher specificity than the * selector, so the font size for headings will be 24px instead of 16px.
3. Unexpected inheritance: Let's say you want to set a background color for all elements using the * selector like this:
   
   * { background-color: #eee; }
   
   This will apply the background color to all elements on the page, including child elements like images and form elements. If you had a form on your page that looked like this:
   
   <form>  
<label for="name">Name:</label>
<input type="text" id="name">  
<button type="submit">Submit</button>
</form>
   
   The * selector will apply the background color to the form elements, which may not be what you want. This can make it harder to style the form elements in a way that's consistent with the rest of your page.

Examples on why :root should be used instead of * selector

Here are some detailed examples and issues that highlight why you should use :root instead of the * selector:

1. Overriding styles: As I mentioned earlier, using the * selector to set default styles can unintentionally override more specific styles that were applied to individual elements. Using :root instead can avoid this issue because it only applies the styles to the root element (i.e. the html element), which won't affect any other styles on the page. For example:
   
   :root {
--text-color: red;
}

h1 {
color: var(--text-color);
}
   
   This will set the --text-color variable on the root element, but it won't affect the color of the heading because it's using a more specific selector to set its own color.
2. Specificity issues: Using the * selector can also cause issues with specificity, as I mentioned earlier. :root can avoid this issue by allowing you to define custom CSS variables that can be used throughout your document, without affecting other styles on the page. For example:
   
   :root {
--font-size: 16px;
}

h1 {
--font-size: var(--font-size);
}
   
   This will set the --font-size variable on the root element, which can then be used to set the font size for the heading. Because :root has a higher specificity than the * selector, this variable will take precedence over any other font-size styles that were previously applied.
3. Unexpected inheritance: Finally, using the * selector to apply styles to all elements can result in unexpected inheritance, which can be difficult to manage. :root can avoid this issue by allowing you to define custom CSS variables that only apply to the root element, without affecting any other elements. For example:
   
   :root {
--background-color: #eee;
}

body {
background-color: var(--background-color);
}
   
   This will set the --background-color variable on the root element, which can then be used to set the background color of the body element. Because :root only applies the variable to the root element, it won't affect any other elements on the page.

Conclusion

Overall, using :root instead of the * selector can help you avoid issues with specificity, inheritance, and unintended style overrides, which can make it easier to manage and maintain your CSS styles over time.