Reading Time: 8 minutes

Folks who are brand new to web development, particularly front-end, might hear the term “Specificity” or “CSS Specificity” and when they look it up the answer can seem daunting and confusing.

I want to break it down in very simple, very non-technical terms so that someone brand-new to the world of front-end can understand what it is.

This article is going to take down the one “great big question” and turn it into four smaller questions:

1. What is CSS Specificity
2. Why we need it
3. How we use it
4. How the browser uses it

What is CSS Specificity?

First of all, it’s hard to pronounce. (Try saying, “The sixth sheik’s sixth CSS Sheet’s CSS specificity’s sick”)

Let’s start by defining specificity in a general context:

the quality or condition of being specific

: such as…the condition of being peculiar to a particular individual or group of organisms

https://www.merriam-webster.com/dictionary/specificity

Paraphrasing, I’d define specificity as, “being in some particular category, or some particular item, out of a group of categories or items”

Specificity in a CSS context:

If we’re on the same page that specificity is some particular category or item out of a group of categories, then CSS specificity means something more like, “some particular element or elements out of a whole bunch of them”

Or, if you wanted a slightly more dictionary-ish definition:

The quality or condition of being specific, such as the condition of being peculiar to a particular element in a document, or group of elements in a document”

CSS specificity is your way of telling a browser, “this group of styles applies to some particular element(s) out of all the elements”

That’s it in a nutshell.

Why do we need specificity in CSS?

There’s two reasons we need specificity in CSS. One of which is obvious:

1. We need some way to tell the browser which elements should be styled
2. We need some way to tell the browser how to resolve conflicts if an element has competing styles.

So, we know what specificity is in CSS. It’s the means by which we call out a particular element or elements for a style.

But then there’s the harder question…

How do we use it?

Specificity is one item or group out of many groups, right?

So, let’s imagine we have a pet-grooming business and we want to tell a groomer (the browser) to put a bow-tie on some pets (elements).

Put a bow tie on all the animals:

Every.Single.Living.Thing that walks through the doors gets a bow tie.

* {  
  display: bowtie;
}

You opted for the * which means, “everything”.

You weren’t specific at all; this is the universal selector.

Put a bow tie on the dogs

Turns out it was a bad idea to put bow-ties on the snakes. Let’s just target the dogs.

dog {  
  display: bowtie;
}

We have used the element selector to specify a particular kind of element out of all the elements.

You were a little specific; this is sometimes called the “element” or “type” selector.

Put a bow tie on the border collies:

As it would turn out, border collies are the handsomest of all the dogs in their bow ties. It legitimizes their views of squirrels and childhood eating habits:

.border-collie {  
  display: bowtie;
}

We have now used a class selector to specify a particular group of our classes.

You were more specific, you chose a class selector.

Put a bow tie on the black and white dogs:

We tried telling the groomer (browser) to put a bow tie on all the black and white animals, but that backfired terribly when a skunk wandered in.

Maybe we should have specified only black and white dogs, or at least had the skunks go last.

dog[color="black-and-white"] {  
  display: bowtie;
}

We specified a kind of element with attributes. We’re specifying our element using two different domains:

• type/element
• attributes

Attributes are still a kind of grouping, which is why we’d still call this a “class” grouping.

Tip: If a bow tie on a skunk is why I have to write dog[color="black-and-white"] maybe I need to ask how the skunk got inside in the first place

If we were putting bow ties on our animals based on the order in which they came in…

We could’ve tried using a pseudo group (class) and specified order:

animal:first-child {  
  display: bowtie;
}

But, that assumes that the skunk isn’t a Mr. Bossy-Pants who cut in line. We have to be careful when we select something by order that the order of items can’t change in some unexpected way.

Put a bow tie on Frank’s Border Collie, Delilah

Frank thinks bow ties are more adorable on his dog than all the others. His dog’s name is Delilah, and the bow-tie will give her the kind of professionalism necessary for teaching this geography course to the children.

#Delilah {  
  display: bowtie
}

We specified not just any old element, but one, and only one element. And we chose to use something absolutely unique: the name or id.

Note: I could say dog#delilah, but just like dog[color=”black-and-white”], if I have to specify who gets the bow tie in this way, there’s something seriously wrong with the appointment book (codebase)

How the browser uses specificity

So, we use specificity to tell the browser (dog groomer) what animals should get bow-ties. But, what if we’ve given the dog groomer (browser) conflicting instructions? How does the dog groomer figure out which instructions to follow?

This is where understanding the mechanics of CSS specificity matters. It matters some, not as much as you might think.

Our dog groomer decides there are three fundamental ways to specify an animal, and that each “way” will have points.

No bow ties on any animals

To save ourselves from skunks and snakes and lizards and spiders in bow-ties, let’s have a general rule of, “no bowties”:

* {  
  display: no-bowties;
}

This is our universal selector. We don’t use it often as it means “everything”; nothing was specified.

So this gets a weight of 0,0,0

Bow ties on the dogs

Now we target the dogs. All the dogs.

dog {  
  display: bowtie;
}

The groomer is going to give this a “weight” of 0,0,1. One point for the “type” slot.

Resolving a conflict with a universal rule

• First we told the groomer, “no bow ties on anything” 0,0,0
• Then we said, “put a bowtie on the dogs” 0,0,1

1 is greater than zero, so all dogs are going to get bow ties!

Plaid ties for the puppies

Puppies just look so adorable in plaid ties. So let’s make it happen:

.puppy {  
  bowtie-pattern: plaid;
}

.puppy is a kind of group or “class”, so our groomer gives it 1 point in the group slot: 0,1,0

There’s no conflict here because we haven’t talked about bow tie patterns for the puppers yet. So the specificity doesn’t actually matter in the least.

Solid patterns for the border collies

Samson and Delilah already have multi-colored coats that are dazzling. They need simple patterns for their bow-ties; none of this plaid nonsense. Border collies are working dogs, professionals.

.border-collie {  
  bowtie-pattern: solid;
}

Resolving a conflict between classes

• We have an animal that’s a .border-collie (0,1,0)
• That animal is also a .puppy (0,1,0)

Each rule has a “group point” of 1, so there’s no way our groomer’s fancy point system can help here.

So our groomer (browser) figures, “ok, the last rule you gave me is the one I’ll go by.”

Let’s hope the pages in this groomer’s rule book never get mixed up.

What if all border collie puppies had one pattern for their bow ties?

.border-collie.puppy {
  bowtie-pattern: solid;
}

This is one way to do it; we tell the groomer to target all members of two groups. That means all border-collie puppies get two group points: 0,2,0

Now we don’t have to worry if the pages fall out and the groomer looks at them in a different order!

What if we want to set the color of our border-collie puppies’ bow ties

Our groomer has lots of bow tie options; not just pattern but color, too. So let’s make sure all border collie puppies get a blue tie:

.border-collie.puppy {
  bowtie-color: blue;
}

We’ve decided there are two groups, and that a member of both groups gets blue bow ties. The groomer puts a weight on this rule as 0,2,0.

Note: If any other schedulers (developers) come in and look at the appointment book (code), they’ll probably raise an eyebrow and wonder why you couldn’t have had just one group; .border-collie-puppy (0,1,0)

What if I want Delilah in a pink tie?

#Delilah {  
  bowtie-color: pink;
}

Now we’re not talking about groups; we’re talking about very specific animals. So this time the groomer gives Delilah a point in a “very unique animals” slot: 1,0,0

Resolving conflicts between IDs and classes

• We already had a bow tie color for border collie puppies (either 0,2,0 or 0,1,0)
• Now we’ve got a style for one very specific animal named Delilah (1,0,0

The groomer ain’t no dummy. The groomer knows that when we mention very specific animals, that gets precedence.

No number of groups that the animal is in can ever be as specific as me saying, “Delilah”.

What is CSS specificity and how does it work?

Fundamentally, CSS Specificity is how you tell the browser what elements get which styles.

It works by giving different “weights” to elements depending on how we choose to specify them. Most of the time those weights don’t actually matter. Lots of folks like to make fancy nerdy charts about specificity. Most of the time those things don’t matter. It’s only when we have conflicting rules that we need to really get into the weeds of how specificity is calculated.