CSS Selectors

A CSS selector selects the HTML element(s) you want to style.

We can divide CSS selectors into five categories:

Simple selectors (select elements based on name, id, class)
Combinator selectors (select elements based on a specific relationship between them)
Pseudo-class selectors (select elements based on a certain state)
Pseudo-elements selectors (select and style a part of an element)
Attribute selectors (select elements based on an attribute or attribute value)

The CSS element Selector

The element selector selects HTML elements based on the element name.

h1 {
text-align: center;
color: red;
}

To select an element with a specific id, write a hash (#) character.

#heading1 {
text-align: center;
color: red;
}

To select elements with a specific class, write a period (.) character.

.heading1 {
text-align: center;
color: red;
}

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

* {
text-align: center;
color: red;
}

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

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