Bugl — code interview practice that feels like a game

Loading lesson path

Flash cards

Review the key moves

1/4

Core idea

What is the main idea behind CSS Grouping Selectors?

Lesson checks

Short Mimo-style checks built from this lesson's code, terms, and sequence.

1Quick choice

Which statement best captures the main point of this lesson?

2Fill blank

Complete the missing token from the example code.

___-align: center;

3Order

Put the learning moves in the order that makes the concept easiest to apply.

All CSS Simple Selectors

The CSS Grouping Selector

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

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