CSS Universal (*) Selectors

 SELECTORS

Universal

You learned how the type selector selects all elements of a given type. Well, the universal selector selects all elements of any type.

Targeting all of the elements on the page has a few specific use cases, such as resetting default browser styling, or selecting all children of a parent element. Don’t worry if you don’t understand the use cases right now—we will get to them later on in our Learn CSS journey.

The universal selector uses the * character in the same place where you specified the type selector in a ruleset, like so:

* { 
  font-family: Verdana;
}

In the code above, every text element on the page will have its font changed to Verdana.

Instructions:

1.

To see how the universal selector targets all elements on a page, copy the rule below and paste it on the first line of style.css.

* {
  border: 1px solid red;
}

Then, click “Run”.

Since the universal selector targets all elements, every element on the page now has a red border. Not a visually pleasing look, but you can see how all of the elements have been modified.