Overview of This Lesson

This quick lesson shows you you how to properly use the Universal Selector (the asterisk * ) in CSS. Too many people use this selector incorrectly and it drives me crazy. Hopefully after going through this tutorial, you'll understand when and how to use the Universal Selector :)

Pre-Requisites

Before doing this tutorial, make sure you're already familiar with CSS Syntax, how to use CSS, and basic selectors, properties, and values.

The Universal Selector

The Universal Selector is the asterisk * symbol. It's an element/type selector, and it matches ANY element type. It's basically a wildcard symbol.

For example, if you had a rule such as:

* {
  font-weight: bold;
}

This rule will select every single element in the document and style all text content to be bold. Obviously this is not something you would want to do, so what would you use the universal selector for?

There are three specific situations where you can use the universal selector without pissing off the CSS dieties. If it's not one of these situations, don't use the universal selector!!

When you need to select all children of an element, you can do this easily using the universal selector. In this Codepen, I used it to style all the children of the <article> to have the same amount of margin and padding:
See the Pen Universal Selector Use-Case 1 by Wendi Jollymore (@ProfWendi) on CodePen.
You could also use the descendant selector if you wanted to include all descendants. If you wanted to apply styles to all siblings, you could use the general sibling combinator.
When you want to reset/change a certain group of disparate elements. This nice if you want to apply styles to all elements with a certain class or attribute. For example, this CodePen styles all the paragraphs with the lang="fr" attribute:
See the Pen Universal Selector Use-Case 2 by Wendi Jollymore (@ProfWendi) on CodePen.
Some other examples:
```
*.highlight {
  /* change styles for all elements with the "highlight" class */
}
```
This example is used by a lot of developers to reset items on a page:
```
*, *:after, *:before { 
  box-sizing:border-box; 
  margin: 0; 
  padding: 0;
}
```
The above example resets all elements' margin and padding and ensures that all elements content areas shrink to accommodate padding/margin/borders (box-sizing property MDN).

Many elements have default padding and margin spacing, but it's not consistent: for example, the default margin and padding used for <p> elements varies for different browsers. If you make this rule the first rule in a CSS file, it will make it much easier to lay out and size HTML elements: it will set the margin and padding to 0, so you don't have to worry about inconsistent defaults.
Debugging. Sometimes you can't figure out why the layout is weird or why things don't seem to have the right margins/padding. Adding something like a border around all elements, or giving all elements in a certain page area a background color can help you see how elements are laid out or how the margins/padding are set up.
See the Pen Universal Selector Use-Case 3 by Wendi Jollymore (@ProfWendi) on CodePen.

Using the Universal Selector Incorrectly

Here's a demonstration of the incorrect use of the Universal Selector:

First, start with this CodePen: feel free to fork/copy it, since you'll be making several changes to it during this demonstration.