From:  Chris Mills <cmills@mozilla.com>
Date:  05 Apr 2017 15:41:38 Hong Kong Time
Newsgroup:  news.mozilla.org/mozilla.dev.mdc
Subject:  

Re: 1000 100 10 1

NNTP-Posting-Host:  63.245.214.181

Hi Rahman,

So, I’m assuming you’ve found this section inside Learn Web Developmnt?

https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance#Specificity

Here’s an even simpler example. Take the following HTML:

Some text

Now take the following CSS: p { color: red; } p { color: blue; } If this were applied to the above HTML, the text color would be blue, because later declarations override earlier ones in the source code However, with this CSS div p { color: red; } p { color: blue; } The text color would be red, because the first declaration’s selector has a higher specificity, which overrides source order. The specificity values of these selectors are 0002, and 0001, because you get one point for each element selector in the overall selector. Now consider this CSS: div p { color: red; } .myClass p { color: blue; } Now the text turns blue again, because the bottom selector now has a higher specificity — 0011 versus 0002. class selectors are worth 10 points, as they are more specific than element selectors — they select a specific class, rather than any element of that type. Now what about this CSS: #myId p { color: red; } .myClass p { color: blue; } The text is now red again, because ID selectors are worth 100 points — the top selector is now worth 0101, and the bottom is now worth 0011. So, the number values are actually pretty arbitrary — they are just a way to signify “low specificity”, “medium specificity”, “high specificity”, “very high specificity” in a way that is easier to count/measure/compare. But we commonly use these numbers. Does that make any more sense? Best, Chris Mills Senior tech writer || Mozilla developer.mozilla.org || MDN cmills@mozilla.com || @chrisdavidmills > On 5 Apr 2017, at 08:19, M A wrote: > > Hi > > I am finding it confusing to understand how 1000 100 10 and 1 works for > specificity? Please can anyone explain with a simple example? > > Thanks > Rahman > _________________________________________________________________________ > Discussing Developer documentation on MDN: dev-mdc mailing list > List email: dev-mdc@lists.mozilla.org > Manage your membership: https://lists.mozilla.org/listinfo/dev-mdc > Unsubscribe: https://lists.mozilla.org/options/dev-mdc/cmills%40mozilla.com?unsub=1&unsubconfirm=1 > MDN contributor guide: http://bit.ly/ContributorGuide