bugl
bugl
HomeLearnPatternsPathsSearchPremium
HomeLearnPatternsPaths

Loading lesson path

Learn/CSS/CSS Foundations
CSS•CSS Foundations

CSS Grouping Selectors

The CSS Universal Selector

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

Example

Formatted code
* {
  text-align: center;
  color: blue;
}

Live preview

The CSS Grouping Selector

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):

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.

Example

Formatted code
h1, h2, p {
  text-align: center;
  color: red;
}

Live preview

All CSS Simple Selectors

SelectorExampleExample description
# id#firstnameSelects the element with id="firstname"
. class.introSelects all elements with class="intro"
**Selects all elements
elementpSelects all <p> elements
element,element,..div, pSelects all <div> elements and all <p> elements

Previous

CSS Selectors

Next

How To Add CSS