CSS Selectors

CSS selectors are used to "find" (or select) the HTML elements 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)

Example 1: The Element Selector

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

This is a heading

This is a paragraph.

Example 2: The id Selector

The id selector uses the id attribute of an HTML element to select a specific element. The id of an element is unique within a page, so the id selector is used to select one unique element!

Hello World!

This paragraph is not affected by the style.

Example 3: The Class Selector

The class selector selects HTML elements with a specific class attribute. To select elements with a specific class, write a period (.) character, followed by the class name.

Red and center-aligned heading

Red and center-aligned paragraph.

Example 4: The Universal Selector

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

Hello world!

Every element on the page will be blue.

Example 5: Grouping Selectors

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

Hello World!

Smaller Hello World!

Example

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

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

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