Quick Tip: Understanding CSS Specificity


The "C" in CSS stands for cascading. This means that that style rules that show up later in the stylesheet will override rules which appear earlier. But this isn't always the case. There's something else you have to take into consideration, as well: specificity. In this quick tip, I'll show you how to do just that.

Specificity Rules

CSS Specificity is basically this: the more specific your selector is, the more precedence it will have. To figure out which selectors are worth more, use this system:

  • Give each HTML element selector 1 point. Example: p
  • Give each class selector 10 points. Example: .column
  • Give each id selector 100 point. Example: #wrap
  • Add up the points for each piece of the selector to get the full value of the selector.

For Example

#test { background: red; } /* specificity : 100 */

.item p { background: green; } /* specificity : 10 + 1 = 11 */

p { background: orange; } /* specificity : 1  */

body #wrap p { background: yellow; } /* specificity : 1 + 100 + 1 = 102 */
Related Posts
  • Web Design
    HTML & CSS
    Quick Tip: Solving the Equal Height Column ConundrumFloat columns
    There's one familiar problem in web design which has been around ever since we moved from the days of table-based design into the CSS era, and that is: "How can I have 100% height backgrounds in my flexible multi-column layout?". Today, we'll look at some solutions.Read More…
  • Web Design
    HTML & CSS
    A “Readability First” Approach to Media Queries and LayoutReadability first thumb
    In this article I'll be talking about a methodology that is a mixture of many approaches to Responsive Web Design, with a few extras stirred in. It's both "Content First" and "Device Agnostic", and was originally inspired by the typography focused em based "Goldilocks Approach". I like to think of it as a "Readability First" approach.Read More…
  • Web Design
    Complete Websites
    Building the Responsive Timeline Portfolio PagePortfolio thumb
    During this tutorial we will be building the fantastic Timeline Portfolio as seen in an earlier tutorial by Tomas Laurinavicius. We will be using some responsive techniques as well as CSS3 animations, Sass and a little bit of jQuery.Read More…
  • Web Design
    A Simple Mixin Alternative to Standard CSS GridsMixin grid retina
    Over the past few years CSS grid systems have become a very popular way of rapidly producing layout scaffolding in web design. They can be a fantastic time-saving resource, with talented coders having intelligently crafted systems which cater to a wide array of possible layouts designers might need to create. However, this isn't the only way to approach grid-based web layouts, and today we're going to examine an alternative.Read More…
  • Web Design
    The Truth About Multiple H1 Tags in the HTML5 EraH1 retina
    Whether you're a webmaster or a web designer, there's a question you've most likely either asked or answered many times over the years. That question is, "How many <h1> tags can I use per page, and how exactly should I implement them?"Read More…
  • Code
    HTML & CSS
    AbsurdJS or Why I Wrote My Own CSS PreprocessorAbsurd 400
    As a front-end developer, I'm writing a lot of CSS and using pure CSS is not the most efficient way nowadays. CSS preprocessors are something which have helped me a lot. My first impression was that I finally found the perfect tool. These have a bunch of features, great support, free resources and so on. This is all true and it still applies, but after several projects, I realized that the world is not so perfect. There are two main CSS preprocessors - LESS and SASS. There are some others, but I have experience with only these two. In the first part of this article I'll share with you what I don't like about preprocessors and then in the second part I'll show you how I managed to solve most of the problems that I had.Read More…