No Justice. No Peace. #BlackLivesMatter

Blog: CSS Specificity: An Overview

Manny Becerra as a child

December 2006

One of the trickier things to wrap your mind around, in the world of Web development and design, is CSS specificity. Specificity essentially determines what CSS rule of yours is applied to your HTML elements by any given browser (e.g. IE, Firefox, Opera). As a quick reminder or for those seeing CSS for the first time, CSS stands for: Cascading Style Sheets. CSS is the language used in Web design to define the presentation layer — the look — of your Web site.

In other words, CSS specificity communicates to a browser that you want an element on your page — say, a box or a group of boxes — to look a certain way. It also tells the browser when to override a subset of elements to look and behave slightly differently from the rest.

Take for example the following three boxes, or as they're often referred to as: div elements. All three boxes — divs — are nearly identical. They all have a visible, solid border with a width value of 1px, each are defined as taking 30% of the parent div's full-width (100%), and each one is set to float to the left so they can align side-by-side one another.

Ah! Except, one of them has a different border color. This is due to specificity. And, this is how we would accomplish the above scenario:

.border-box-style-one {
  width: 30%;
  float: left;
  border: 1px solid #d1d5da;
}

.border-box-style-two {
  width: 30%;
  float: left;
  border: 1px solid purple;
}

Let's unpack this

The first CSS rule, border-box-style-one, would give an HTML element a width of 30%, a float value of left, and a border that is 1px width, solid (as opposed to dashed for example), and a color of #d1d5da, which is a light gray.

The second CSS rule, border-box-style-two, would do the same thing as the first CSS rule, except it defines a different border color (purple).

To use these CSS rules, you would give the first two div elements the class value of border-box-style-one and the third div a class value of border-box-style-two, like the following:

<div>
  <div class="border-box-style-one">
    Some content
  </div>
  <div class="border-box-style-one">
    Some additional content
  </div>
  <div class="border-box-style-two">
    Some more content
  </div>
</div>

Note: the Some content in each example box above is simply to illustrate that 1) you can place content within each of these div elements, if you wish and your design calls for it, and 2) for readability of the example div elements.

Reusability & Things to keep in mind...

If you look closely at the class definitions — border-box-style-one and border-box-style-two — you may end up asking yourself: is there a way to 1) combine these rules to reduce the writing of multiple, similar code, and 2) a way to leverage CSS to apply rules to multiple HTML elements?

Yes — yes there is! There are some quirks with IE6 (as always), however, very recently, a new project called Sass has surfaced that shows promise on the ability to centralize one's style sheet rules and final style sheet markup. In a future post, and once I've had an opportunity to explore Sass more myself, I'll see about showing some examples.

In the meantime, keep in mind the following CSS rules:

  • Specificity essentially determines what CSS rule of yours is applied to your HTML elements by any given browser (e.g. IE, Firefox, Opera)
  • CSS is powered by selectors. A CSS selector is essentially part of the rule set that also determines specificity based on an HTML elements' id, class, type (of element), and attributes.
  • Higher specificity always wins. For example: #some-id .some-class would win over .some-class because the former is leveraging an id value (with the # symbol) in addition to the class value of .some-class, while the later is only leveraging a class of .some-class.
  • When CSS selectors, and your defined rules, have an equal specificity value, the latest rule wins.
  • Also, embedded style sheets have greater specificity than imported style sheet rules
  • Inline style rules beat everything else, e.g. embedded, imported, etc.

If it appears like a lot to take in at first, that's because it is; in fact, there's actually a specificity calculator to this CSS hierarchy madness that can be helpful. I'll go over that next time as well.

Manny


I am human, a father, and a problem solver: a tech and people leader with a passion and proven track-record in building and leading compassionate, productive teams—remote and on-site—within a continuous learning culture. My teams and I champion usable, inclusive digital products and online experiences. My work, passion and intentions also intersect with advising small businesses and political campaigns, life-long learning, outdoor advocacy, community building, and uplifting others. Learn more about Manny