CSS Selectors

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.

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

The CSS 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. To select an element with a specific id, write a hash (#) character, followed by the id of the element.

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

The CSS 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.

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

CSS Grouping Selector

The grouping selector selects all the HTML elements with the same style definitions. It can be a good idea to group selectors to minimize the code. To group selectors, separate each selector with a comma.

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