{"id":38879,"date":"2016-07-31T09:37:23","date_gmt":"2016-07-31T04:07:23","guid":{"rendered":"http:\/\/www.tothenew.com\/blog\/?p=38879"},"modified":"2016-08-01T17:29:41","modified_gmt":"2016-08-01T11:59:41","slug":"mastering-css-specificity","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/mastering-css-specificity\/","title":{"rendered":"Mastering CSS Specificity"},"content":{"rendered":"

CSS Specificity is one of the most confusing concept in Cascading Style Sheets and that’s the main reason, many Front End Developers<\/a> avoid this for as long as possible.<\/p>\n

\n

Specificity is a weight that is applied to a given CSS\u00a0declaration and is determined by the number of each selector type in the matching selector.<\/em><\/strong><\/p>\n<\/blockquote>\n

Basically, it’s a mechanism within the CSS cascade, which helps browsers in conflicts resolution. Suppose, you have two (or more) conflicting CSS rules that are being applied to the same element, then there are going to be some basic rules which a browser will follow to determine which one is most specific<\/b> and that particular CSS\u00a0declaration will win.<\/p>\n

Let’s start with some basic examples.<\/p>\n

Example 1<\/strong><\/p>\n

p{ color: red;}
\np{color:blue;}<\/code><\/p>\n

Here, the color of paragraph text will be blue as it came last in the style sheet and will override the above\u00a0 <\/span>p <\/strong>declaration.<\/p>\n

Example 2<\/strong><\/p>\n

<p class=\"text-red\">text here<\/p>
\n.text-red{color: red;}
\np{ color: blue }<\/code><\/p>\n

In this example, it might seem that \u00a0paragraph text<\/em><\/strong>\u00a0\u00a0<\/span>would be colored blue<\/strong><\/em>, as the declaration to color p text blue comes last, but \u00a0paragraph text<\/em>\u00a0<\/strong>would actually be colored red<\/strong><\/em> due to the specificity<\/b><\/em> of the first selector. Here, the specificity weight of first selector is 10,<\/strong><\/em> while specificity weight of second selector 1<\/strong>.<\/em> Hence, the preference will be given to first selector.<\/p>\n

Specificity Ranking.<\/strong><\/p>\n

Every selector has been given a particular rank. Inline style lies on top, whereas elements and pseudo elements lies in bottom.<\/p>\n

Inline styles > IDs > Classes and pseudo-classes > Elements and pseudo-elements<\/p>\n

How to calculate specificity ?<\/strong><\/p>\n

To find the actual specificity of a group of nested selectors takes some calculation. Basically, every inline style<\/strong><\/em> has a specificity of 1000, every ID selector<\/b><\/em>\u00a0has a value of 100<\/b>, every class selector<\/em>\u00a0<\/b>has a value of 10<\/b> and every elements and pseudo elements<\/strong><\/em> \u00a0has a value of 1<\/b>. Finally, we add them up to get the specificity weight.<\/p>\n

Examples: –<\/p>\n