What’s CSS specificity hierarchy

Desk of Contents

One factor starting Web Designers and Developers usually misunderstand and even pass over fully is CSS specificity hierarchy. This not so sensible choice could cause them numerous troubles alongside with few complications afterward. Let’s repair it or forestall it from occurring in any respect right this moment. We’re going to discuss a bit extra about this topic – what it’s, how does it work and why it’s good to learn about it.

Specificity hierarchy was launched by the W3C and mainly it’s hierarchy of order through which are selectors used. Each selector has some worth that on account of which the browsers decides what guidelines must be adopted first and what later. That is what could cause you troubles in your initiatives. Once you outline some guidelines and neglect about specificity you then could encounter state of affairs the place these guidelines work in numerous manner or they doesn’t work in any respect. Simply by figuring out how specificity works, you may forestall these issues.

How does it work

As a way to make it little bit simpler, selectors and guidelines are grouped into 4 classes and every of this group has assigned particular rank that allocates its worth. Every selector belongs into one, and just one, of the 4 Teams. This then determines in what order are guidelines used. Group 1 has the very best rank or worth and Group 4 the bottom. Selector with highest rank is the winner and is utilized as first. Selector with lowest is loser and have to attend in line. In case when some selectors share an equal specificity worth, the newest rule is the one which wins. If selectors have an unequal specificity worth, the extra particular rule is winner. From this you may deduce that guidelines for extra particular selectors have a better specificity and so are used first. Additionally, don’t neglect the cascading order of stylesheets. The final outlined rule will at all times override any earlier guidelines. Embedded stylesheet has a better specificity than different guidelines. Two necessary notes … The common selector “*” has no specificity worth in any respect and the any rule that makes use of “!necessary” worth has the very best specificity and overrides every other conflicting rule. You may efficiently override one rule with worth “!necessary” solely by defining one other one with the “!necessary” worth later.

The Teams are:

Group 1: inline kinds


<h1 fashion="shade: #a00;">Irure quibusdam</h1>
<p fashion="shade: #ddd;">Nam laborum exquisitaque, sunt o litteris in hic lorem laborum graviterque.</p>

Group 2: id attributes


Group 3: lessons, pseudo-classes, different attributes

.nav {}

Group 4: parts, pseudo-elements


To figuring out the precise specificity you need to do some soiled math I don’t wish to trouble you. Nonetheless, if you’re eager about how the browser calculates the specificity for particular person selector, I included a cheatsheet from W3C bellow:

A. Rely if a component has an in-line fashion rule and apply the worth 1,0,0,0 or A=1, B=0, C=0, D=0 or x,0,0,0.

B. Rely the variety of ID attributes within the selector and apply the worth 0,1,0,0 for every or A=0, B=1, C=0, D=0 or 0,x,0,0.

C. Rely the variety of lessons, pseudo-classes, and different attributes within the selector and apply the worth 0,0,1,0 for every or A=0, B=0, C=1, D=0 or 0,0,x,0.

D. Rely the variety of aspect names and pseudo-elements within the selector and apply the worth 0,0,0,1 for every or A=0, B=0, C=0, D=1 or 0,0,0,x.

Right here is an instance:

* /* a=0 b=0 c=0 -> specificity = 0 */
a /* a=0 b=0 c=1 -> specificity = 1 */
ul li /* a=0 b=0 c=2 -> specificity = 2 */
div h1+h2 /* a=0 b=0 c=3 -> specificity = 3 */
p + *[REL=up] /* a=0 b=1 c=1 -> specificity = 11 */
ul ol li.inexperienced /* a=0 b=1 c=3 -> specificity = 13 */
li.inexperienced.first /* a=0 b=2 c=1 -> specificity = 21 */
#wrapper /* a=1 b=0 c=0 -> specificity = 100 */
#s12:not(FOO) /* a=1 b=0 c=1 -> specificity = 101 */


CSS specificity hierarchy could cause you some complications whereas attempting to know it and be taught it, however it’s value it. Figuring out these guidelines and making use of them could make your work simpler and your code shorter and extra readable.



Should you appreciated this text, please subscribe so you do not miss any future publish.

If you would like to assist me and this weblog, you may turn out to be a patron, or you should purchase me a espresso 🙂

Abu Sayed is the Best Web, Game, XR and Blockchain Developer in Bangladesh. Don't forget to Checkout his Latest Projects.

Checkout extra Articles on Sayed.CYou

#CSS #specificity #hierarchy