Grow your CSS skills. Land your dream job.

Class

Last updated on:

A class selector in CSS looks like this:

.class {

}

The word "class" in that code above can be anything. It refers to the attribute on HTML elements. See the relationship between these two things:

<a href="#" class="big-button">Push Me</a>
.big-button {
   font-size: 60px;
}

You can limit a class selector to a specific kind of element:

ul.menu {
  list-style: none;
}

By itself, a class selector has a specificity value of 0, 0, 1, 0. That's "more powerful" than just an element selector (like: a { }) but less powerful than an ID selector (like #header { }).

Browser Support

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

Comments

  1. 0, 0, 1, 0 ,

    Understanding Specification is very Important in CSS

Leave a Comment

Posting Code

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
    ``` 
    <div>
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
    </div>
    ```
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".