CSS Selectors

This paragraph is styled with a class selector named para.

<style>
  .para {
    background-color: aliceblue;
    border: 1px solid lightblue;
    padding: 20px;
  }
</style>

<p class="para">A styled paragraph</p>

There are 6 CSS selector types.

1. CSS class selectors
2. CSS id selectors
3. CSS element selectors
4. CSS attribute selectors
5. CSS pseudo-class selectors
6. CSS global selectors

Class selectors select the class attribute of an element. The selector is prefixed with a . (dot). One or more elements can be selected.

Some example class selectors:

Id selectors select the id attribute of an element. The selector is prefixed with a # (hash). Only one element can be selected because id values are unique on a page.

An id selector:

Element selectors select elements by tag name, i.e. type, such as div or ul. The style applies to all elements of that type.

Some element selectors:

Attribute selectors select elements by attribute. The selectors are surrounded by square brackets, for example [hidden]. The style applies to all elements with that attribute.

Some attribute selectors:

Pseudo-class selectors select elements by psuedo-class. It is commonly combined with element selectors, such as input:enabled.

Some pseudo class selectors:

The global selector uses an * (asterisk). It selects all elements.

• Our CSS Specificity Tutorial
• Our HTML Tag List
• Our HTML Attribute List