The Universal Selector

The css universal selector selects any element within an HTML page and can also select any element inside another.

For the universal selector we use the asterisk (*) symbol.

Basic usage:

* { style_proerties }

Example:

* {
   color: blue;
}

This will select all elements and sets their font color to blue.

Most of the time we only use this selector to reset css. What does it mean exactly? The browser applies some default formatting to HTML elements, and these formattings may not be the same in all browsers. It may result in some inconsistencies when people view your site in different browsers. With the universal selector we can remove these default formattings.

For example, let’s remove the default padding and margins from our document:

* {
   margin: 0;
   padding: 0
}

We can use the universal selector to select elements within another. For example,

#articles * {
   font-size: 18px;
}

Select all elements inside #articles and set their font size to 18px. However, we can firther narrow this down.

#articles * p {
   font-size: 18px;
}

Now we will only apply the font size to paragraph elements inside #articles