CSS Selectors

CSS Selectors

CSS selectors are used for 'finding' (or selecting) HTML elements to set styles.

We can divide CSS selectors into five categories:

This page will explain the most basic CSS selectors.

CSS Element Selector

Element selectors select HTML elements based on element names.

Instance

Here, all <p> elements on the page will be centered and have red text color:

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

Try it yourself

CSS ID Selector

ID selectors use the id attribute of HTML elements to select specific elements.

Element IDs are unique on the page, so ID selectors are used to select a unique element!

To select an element with a specific id, write a hash (#) followed by the element's id.

Instance

This CSS rule will apply to the HTML element with id="para1":

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

Try it yourself

Note:ID names cannot start with numbers.

CSS Class Selector

Class selectors select HTML elements with a specific class attribute.

To select elements with a specific class, write a dot (.) character followed by the class name.

Instance

In this example, all HTML elements with class="center" will be red and centered:

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

Try it yourself

You can also specify that only certain HTML elements are affected by the class.

Instance

In this example, only <p> elements with class="center" will be centered:

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

Try it yourself

HTML elements can also reference multiple classes.

Instance

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

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

Try it yourself

Note:Class names cannot start with numbers!

CSS Universal Selector

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

Instance

The following CSS rules will affect every HTML element on the page:

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

Try it yourself

CSS Grouped Selectors

Grouped selectors select all HTML elements with the same style definitions.

Please see the following CSS code (h1, h2, and p elements have the same style definitions):

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

It is best to group selectors to minimize code as much as possible.

To group selectors, use commas to separate each selector.

Instance

In this example, we group the selectors mentioned above:

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

Try it yourself

All simple CSS selectors

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

Further Reading

课外书：CSS Element Selector

课外书：CSS Selector Grouping

课外书：CSS Class Selector Detailed

课外书：CSS ID Selector Detailed

课外书：CSS Attribute Selector Detailed

课外书：CSS Descendant Selector

课外书：CSS Child Element Selector

课外书：CSS Adjacent Sibling Selector