The CSS Specificity concept is not only a little bit of a tongue twister (try to say it three times fast!), but it can also be a bit of a mind bender too! It\u2019s one of the more difficult concepts in CSS to grasp. In this article, we\u2019ll cover what we mean by specificity, how it\u2019s calculated, and how the ranking of selectors determines the style that is rendered on the page. So fret not! You\u2019ll be a specificity expert in no time. <\/p>\n\n\n\n
CSS specificity basically refers to how important a selector is. Each selector is assigned a specificity depending on what type it is. The higher the number of the selector, the more specific it is and the likelier that that particular block of CSS will win the styling wars.
<\/p>\n\n\n\n
Specificity is represented by four numbers, each separated by a comma:<\/p>\n\n\n\n
Selector specificity = 0, 0, 0, 0<\/pre><\/div>\n\n\n\nWhen we look at the specificity as a string of four numbers without the commas (i.e. 0000, 0101, 1001, etc.), the higher<\/em><\/strong> the number is, the more specific<\/em><\/strong> it is.
<\/p>\n\n\n\nSelectors\u2019 specificity by rank (low – high):<\/h3>\n\n\n\n
Let\u2019s walk through the different types of elements based on rank:
<\/p>\n\n\n\n
- \uff0a <\/li><\/ul>\n\n\n\n
The universal selector. It\u2019s specificity is 0, 0, 0, 0. Usually you will see these at the top of style sheets. It\u2019s the lowest on the rank in terms of importance. Pretty much anything will override it or add to the universal selector CSS.
<\/p>\n\n\n\n
- \uff1e, \u2795, \u2018 \u2018 , \u223c <\/li><\/ul>\n\n\n\n
The combinators, usually seen when selecting a sibling of a child of a type selector or class selector, have no effect on specificity and do not count toward the overall number. Negation pseudo classes (:not) also fit into this specificity category.
<\/p>\n\n\n\n
- div, form, ul, li, etc.<\/li><\/ul>\n\n\n\n
These are type<\/strong> selectors. These selectors pretty much encompass anything that could be considered a tag in your HTML. It\u2019s specificity weight is 0, 0, 0, 1. If you have multiple type selectors after another separated by a combinator, you\u2019ll add the selectors together:<\/p>\n\n\n\n
div li {} \u21d0 the specificity is 0,0,0,2\n\ndiv li p {} \u21d0 the specificity is 0,0,0,3<\/pre><\/div>\n\n\n\n
- .main-container, .navbar, [type=\u201dtext\u201d], :hover<\/li><\/ul>\n\n\n\n
Next in line for specificity is class, attribute and pseudo-class selectors. <\/p>\n\n\n\n
Class selectors are indicated by the dot (\u201c.\u201d) at the beginning. Attribute selectors have an attribute inside square brackets next to its type selector. The pseudo-class selector is reserved for special elements that need more specific styling. These have a specificity of 0, 0, 1, 0. <\/p>\n\n\n\n
div.navlink a {}<\/pre><\/div>\n\n\n\n\u2013 The specificity is 0, 0, 1, 1 because we have one class selector and we have one type selector. <\/p>\n\n\n\n
div.header li.list-item-disc button[type="submit"] {} <\/pre><\/div>\n\n\n\n\u2013 The specificity is 0, 0, 3, 3 because we have 3 type selectors and 2 class selector + 1 attribute selector. If we took the attribute selector off, the specificity would be 0, 0, 2, 3. Because 23 is less than 33, the CSS selector with the 0, 0, 3, 3 specificity would win out because it has the higher specificity. <\/p>\n\n\n\n
- #blue, #hidden, etc. <\/li><\/ul>\n\n\n\n
ID selectors have the highest specificity amongst the CSS selectors: 1, 0, 0, 0. Because of the unique nature of the ID attribute definition, we are usually styling a really specific element when we call up the ID in our CSS.
<\/p>\n\n\n\ndiv#orange {}<\/pre><\/div>\n\n\n\n\u2013 The specificity is 1, 0, 0, 1 because we have a type selector and an ID selector. Which style wins according to our specificity rules out of the following? <\/p>\n\n\n\n
div#orange {\n\tbackground-color: orange;\n}\ndiv.square {\n\tbackground-color: green;\n\twidth: 150px;\n\theight: 150px;\n}<\/pre><\/div>\n\n\n\n
- The first div has a type selector and an ID selector, making it\u2019s overall specificity 1, 0, 0, 1.<\/li>
- The second div has a type selector and a class selector, making it\u2019s overall specificity 0, 0, 1, 1. <\/li><\/ol>\n\n\n\n
Since 1001 is greater than 11, the first div wins and the background-color will be orange, contrary to the cascading nature of the CSS. <\/p>\n\n\n\n
<\/p>\n\n\n\n
- Inline-style<\/li><\/ul>\n\n\n\n
How does inline-styling fit into all of this? It is even more<\/em> specific than ID selectors. An inline-style will trump just about anything in your CSS file. It\u2019s weighted the highest in terms of specificity.
<\/p>\n\n\n\n
!important<\/code> rule<\/li><\/ul>\n\n\n\nThe
!important<\/code> keyword trumps everything. It is the most specific and will overwrite any previous rules set by CSS.
<\/p>\n\n\n\nPractice<\/h3>\n\n\n\n
In the code editor below, I created a page of sample containers with some random class names and ID names. I would like for you to take a moment and practice using your CSS skills to change specific elements to a different color while all other divs stay the same color. How would you write those rules in CSS? What would you use to get the highest specificity if that\u2019s what you needed to use to target a certain element.
<\/p>\n\n\n\n<!DOCTYPE html>\n<html lang="en">\n <head>\n <meta charset="UTF-8" \/>\n <meta name="viewport" content="width=device-width, initial-scale=1.0" \/>\n <title>CSS Specificity<\/title>\n <style>\n body {\n width: 100%;\n max-width: 800px;\n margin: 0 auto;\n }\n \n main {\n width: 100%;\n height: 800px;\n display: flex;\n flex-wrap: wrap;\n flex-direction: column;\n }\n \n div {\n text-align: center;\n }\n *.square {\n \/* what does the star mean here? Does it add to the specificity number at all? How can you test your hypothesis? *\/\n height: 150px;\n width: 150px;\n background-color: black;\n color: white;\n margin: 20px;\n }\n \n div.flex {\n \/* Does this compete with the other class at all? Or does it work in conjunction with the .square class? What would happen if we added a width and a height to this selector? Why does that happen?\n \n Does this override the div selector? Why? How does its specificity compare to the div selector's specificity?\n \n *\/\n display: flex;\n justify-content: center;\n align-items: center;\n }\n div#red {\n \/* why does this one win out? What is the specificity of this div? *\/\n background-color: darkred;\n }\n #red {\n \/* What would happen if we took the 'div' out of the previous selector? Which one wins? *\/\n background-color: red;\n }\n \n main > div {\n font-size: 55px;\n font-weight: bold;\n }\n \n div#self-align {\n \/* What happens here? *\/\n align-self: center;\n }\n <\/style>\n <\/head>\n <body>\n <main>\n <div id="self-align" class="square flex">1<\/div>\n <div class="square flex">2<\/div>\n <div class="square flex">3<\/div>\n <div class="square flex">4<\/div>\n <div class="square flex">5<\/div>\n <div id="red" class="square flex">6<\/div>\n <div class="square flex">7<\/div>\n <div class="square flex">8<\/div>\n <div class="square flex">9<\/div>\n <div class="square flex">10<\/div>\n <div class="square flex">11<\/div>\n <div class="square flex">12<\/div>\n <\/main>\n <\/body>\n<\/html><\/pre><\/div>\n\n\n\n