CSS Selectors

What are 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:


This page will explain the most basic CSS selectors.

CSS Element Selector

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

Example:

Here, all <p> elements on the page will be center-aligned, with a red text color

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

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.

Example:

In this example all HTML elements with class="center" will be red and center-aligned

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

You can also specify that only specific HTML elements should be affected by a class.

Example:

In this example only <p> elements with class="center" will be center-aligned

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

HTML elements can also refer to more than one class.

Example:

In this example the <p> element will be styled according to class="center" and to class="large".

<p class="center large">This paragraph refers to two classes.</p>

CSS Universal Selector

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

Example:

The CSS rule below will affect every HTML element on the page

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

CSS Grouping Selector

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

h2 {
   text-align: center;
   color: blue;
}

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

It will be better to group the selectors, to minimize the code.

To group selectors, separate each selector with a comma.

Example:

In this example we have grouped the selectors from the code above

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

All CSS Simple Selectors

Selector Example Example Description
.class .intro selects all elements with class="intro"
#id #firstname Selects the element with id="firstname"
* * Selects all elements
element p Selects all <p> elements
element, element div, p Selects all <div> elements and all <p> elements

Reference

Documentation on this page taken from w3school.com