Grouping Selectors

The CSS Universal Selector

The universal selector (*) selects all HTML elements on the page.

css

*
{

  text-align: center;

  color: blue;

}

The grouping selector selects all the HTML elements with the same style definitions.

Look at the following CSS code (the h1, h2, and p elements have the same style definitions):

css

h1
{

  text-align: center;
  color: red;

}

h2
{

text-align: center;
  color: red;
}

p
{

  text-align: center;
  color: red;

}

It will be better to group the selectors, to minimize the code.

To group selectors, separate each selector with a comma.

css

h1, h2, p
{

text-align: center;
  color: red;
}

Selector	Example	Example description
#id	#firstname	Selects the element with id="firstname"
.class	.intro	Selects all elements with class="intro"
*	*	Selects all elements
element	p	Selects all `<p>` elements
element,element,..	div, p	Selects all `<div>` elements and all `<p>` elements