CSS Universal Selector

Selectors are patterns implemented for selecting elements to provide styles using the rules of CSS. Some selectors were introduced by CSS2 which have some specific functionality and way of implementation. In this chapter, you will learn about universal selectors in CSS.

Universal Selector in CSS

The universal selector provided by CSS helps in choosing any elements within the HTML page. It goes with a single element and makes use of asterisk (i.e., "*") symbol used for denoting the selector as a universal selector. It is usually written as asterisk followed by a selector. The * is used for selecting all elements. This asterisk also has the capability in selecting all elements that are inside another element.

The universal selector becomes helpful when you wish to put a specific style in all the HTML elements within your web page. Also, it can be used for every single element that is within the element of your HTML page. The basic syntax of this selector is:

Syntax:
* {
     property : value;
  }

Code snippet of how to implement:

Example:
* {
     margin : 0px;
     padding : 0px;
  }

In the above example. All HTML elements will have 0px padding and margins, and it will overwrite default padding and margins with all HTML elements.

There are some additional properties of Universal selector, where you can make use of a combination of asterisk with namespace:

  • ns|* - this will allow you to match all elements within the namespace ns.
  • *|* - this will allow you to match simply all elements.
  • |* - this will allow you to match all elements that are without any declared namespace.

Scroll Back to Top