A class selector in CSS starts with a dot (.), like this:

.class {


A class selector selects all elements with a matching class attribute.

For example, this element:

<button class="big-button">Push Me</button>

is selected and styled like this:

.big-button {
  font-size: 60px;

You can give a class any name that starts with a letter, hyphen (-), or underscore (_). You can use numbers in class names, but a number can't be the first character or the second character after a hyphen. Unless you get crazy and start escaping selectors, which can get weird:

.\3A \`\( { 
  /* matches elements with class=":`(" */

An element can have more than one class:

<p class="intro blue">
  This paragraph will get styles from .intro and .blue selectors.

An element with multiple classes is styled with the CSS rules for each class. You can also combine multiple classes to select elements:

/* only selects elements with BOTH of these classes */ {
    font-size: 1.3em;

This demo shows how single-class selectors are different from combined selectors:

See the Pen Using Multiple Classes in CSS by mariemosley (@mariemosley) on CodePen.

You can also limit a class selector to a specific kind of element, which is sometimes called "tag qualifying": {
  list-style: none;


By itself, a class selector has a specificity value of 0, 0, 1, 0. That's "more powerful" than an element selector (like: a { }) but less powerful than an ID selector (like #header { }). Specificity increases when you combine class selectors or limit the selector to a specific element.

Accessing Classes with JavaScript

You can read and manipulate an element's classes with classList in JavaScript. For instance, adding a class could be like:


This demo shows basic examples of classList in use:

See the Pen .classList demo by Chris Coyier (@chriscoyier) on CodePen.

jQuery also has methods for interacting with classes, including .addClass(), .removeClass(), .toggleClass(), and .hasClass().

More Information

Browser Support

Chrome Safari Firefox Opera IE Android iOS
Any Any Any Any Any Any Any


  1. User Avatar
    Saher Team
    Permalink to comment#

    0, 0, 1, 0 ,

    Understanding Specification is very Important in CSS

Leave a Comment

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.