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

The CSS id Selector

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

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

The CSS class Selector

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

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

The CSS Universal Selector

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

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

The CSS Grouping Selector

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

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