{"id":11,"date":"2022-09-15T18:26:00","date_gmt":"2022-09-15T18:26:00","guid":{"rendered":"http:\/\/fem.flywheelsites.com\/?p=11"},"modified":"2023-12-17T19:27:17","modified_gmt":"2023-12-17T19:27:17","slug":"css-specificity","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/css-specificity\/","title":{"rendered":"Tackling CSS Specificity"},"content":{"rendered":"\n

How often have you been frustrated because you\u2019ve just joined a new project and can\u2019t figure out why your styles aren\u2019t being applied properly? Or maybe you\u2019ve just integrated a new library, and suddenly all of your styles are being overridden. You could slap an !important<\/code> declaration onto your styles and call it a day, but that would throw maintainability out the window. So you\u2019ve finally decided to learn about CSS specificity.<\/p>\n\n\n\n

Specificity is one of the foundational concepts of CSS, and understanding it allows you to write maintainable, efficient CSS. So what exactly is specificity?<\/p>\n\n\n\n

What Is CSS Specificity?<\/h2>\n\n\n\n

CSS specificity is the algorithm browsers use to determine which style declarations should be applied to an element. Each selector is assigned a particular weight depending on its specificity and then these weights are measured against each other to determine which style rules win for a particular element. We calculate specificity using three categories: ID, class, and type. Let\u2019s take a deeper look into these weighted selector categories.<\/p>\n\n\n\n

Weighted Selectors<\/h2>\n\n\n\n

The ID<\/strong> category includes ID selectors (i.e. #about<\/code>). For every ID in a selector, add 1-0-0 to the weight.<\/p>\n\n\n\n

The class<\/strong> category includes class selectors (i.e..about<\/code>), attribute selectors (i.e. [type=\"button\"]<\/code>), and pseudo-classes (i.e. :hover<\/code>, :checked<\/code>). For every class, attribute, and pseudo-class in a selector, add 0-1-0 to the weight.<\/p>\n\n\n\n

The type<\/strong> category includes type selectors (i.e. h3<\/code>, aside<\/code>) and pseudo-elements (i.e. ::after<\/code>). For every type and pseudo-element in a selector, add 0-0-1 to the weight.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Calculating Specificity<\/h2>\n\n\n\n

For each of the categories above, we add one to each respective column when we use a selector of that type. For example, if a selector contains a type followed by an ID, we would add a 1 in the ID column and a 1 in the type column giving us a specificity of 1-0-1.<\/p>\n\n\n

\/* 1-0-1 *\/<\/span>\naside<\/span> #paragraph<\/span> {\n  ...\n}\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
To calculate which selector is more specific, we compare the values found in each column. For example, let\u2019s say we have two selectors, each styling a paragraph element.<\/p>\n\n\n
.paragraph<\/span> {\n  ...\n}\n\n.aside<\/span> p<\/span> {\n  ...\n}\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
The first selector contains only one class, so its value is 0-1-0.<\/p>\n\n\n\n
The second selector contains a class selector and a type selector, so its value is 0-1-1.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Now we can compare the two selectors column by column. Starting with the most specific column, the ID selectors column, both selectors have a 0, so we can move on to the next column.<\/p>\n\n\n\n
In the classes, pseudo-classes, and attribute selectors column, each selector has a 1. Since these values are equal, we must compare the third column to determine which selector wins. In the final column, type selectors and pseudo-elements, only the second selector has a 1, so it is more specific.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Examples of Calculating Specificity<\/h2>\n\n\n\n
Let\u2019s look at a few more examples and see if we\u2019re comfortable before moving on.<\/p>\n\n\n\n
In the first example, we have three selectors. These three selectors are all attempting to change the color of a paragraph\u2019s text. The first selector uses two class selectors; the second selector uses a class selector followed by a type selector. The third selector uses two type selectors.<\/p>\n\n\n
.my-aside<\/span> .my-paragraph<\/span> {\n  color<\/span>: blue;\n}\n\n.my-aside<\/span> p<\/span> {\n  color<\/span>: red;\n}\n\naside<\/span> p<\/span> {\n  color<\/span>: yellow;\n}\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
Let\u2019s evaluate each of these selectors using the three-column method.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
    \n
  1. The first selector .my-aside .my-paragraph<\/code> contains two classes, so it gets a two in the second column.<\/li>\n\n\n\n
  2. The second selector .my-aside p<\/code> includes a class and a type selector, so it gets one in the second and third columns.<\/li>\n\n\n\n
  3. The last selector aside p<\/code> contains two types, so it gets a two in the third column.<\/li>\n<\/ol>\n\n\n\n
    Starting from column one, none of the selectors have an ID, so we move on to column two. In column two, we see that the first selector contains two classes while the other selectors contain one and zero, respectively. Thus, selector one is the most specific, and we don\u2019t need to examine column three (assuming all three selectors are styling the same CSS property).<\/p>\n\n\n\n
    \"calculating<\/figure>\n\n\n\n
    The first example was pretty clear cut, but what if we have two selectors of equal weight attempting to style the same element?<\/p>\n\n\n
    <style<\/span>><\/span>\n  .aside<\/span> .paragraph<\/span> {\n    color<\/span>: blue;\n  }\n\n  .my-aside<\/span> .my-paragraph<\/span> {\n    color<\/span>: red;\n  }\n<\/span><\/style<\/span>><\/span>\n\n<aside<\/span> class<\/span>=\"aside my-aside\"<\/span>><\/span>\n  <p<\/span> class<\/span>=\"paragraph my-paragraph\"<\/span>><\/span>...<\/p<\/span>><\/span>\n<\/aside<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
    We can see here that both selectors attempt to style the same paragraph element and have a specificity of 0-2-0. So which color will the paragraph text be?<\/p>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    The text will be red because the latest CSS declaration wins. When two selectors of equal weight attempt to style the same CSS property, the latest, or most recent, declaration wins<\/strong>.<\/p>\n\n\n\n
    If you want the text to be blue, you\u2019ll have to increase the specificity of the first selector or decrease the specificity of the second selector. You could also change the order of the declarations so the first selector becomes the latest selector.<\/p>\n\n\n\n
    Unweighted Selectors<\/h2>\n\n\n\n
    In the previous section we took a look at weighted selectors, or selectors that contribute to a selector\u2019s specificity. There are, however, some selectors which are unweighted and do not contribute to a selector\u2019s specificity weight.<\/p>\n\n\n\n
    These selectors include:<\/p>\n\n\n\n
      \n
    • The universal selector (*)<\/li>\n\n\n\n
    • The :where() pseudo-class<\/li>\n\n\n\n
    • Combinators (i.e. +, >)<\/li>\n\n\n\n
    • The :is() pseudo-class (the selectors inside the parentheses are weighted)<\/li>\n\n\n\n
    • The :not() pseudo-class (the selectors inside the parentheses are weighted)<\/li>\n<\/ul>\n\n\n\n
      Let\u2019s take a look at a few examples containing unweighted selectors.<\/p>\n\n\n\n
      Example of Unweighted Selectors<\/h3>\n\n\n\n
      Here we have three sections that contain paragraphs of text. The second section has a class of highlight<\/code>.<\/p>\n\n\n\n
      In our CSS, the first selector selects all paragraphs that are direct children of elements containing a class of highlight<\/code>.<\/p>\n\n\n\n
      The second selector selects all paragraphs that are descendants of section elements that do not contain the class highlight<\/code>.<\/p>\n\n\n
      <style<\/span>><\/span>\n  .highlight<\/span> > p<\/span> {\n    background<\/span>: yellow;\n  }\n\n  section<\/span>:not(.highlight)<\/span> p<\/span> {\n    background<\/span>: blue;\n    color<\/span>: white;\n  }\n<\/span><\/style<\/span>><\/span>\n\n<section<\/span>><\/span>\n  <p<\/span>><\/span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus modi \n    quasi in nisi nobis! Accusamus possimus perferendis consectetur libero \n    ut dolorem eveniet officiis aliquam. Accusantium cumque ab ratione\n    exercitationem perspiciatis!<\/p<\/span>><\/span>\n<\/section<\/span>><\/span>\n\n<section<\/span> class<\/span>=\"highlight\"<\/span>><\/span>\n  <p<\/span>><\/span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus modi \n    quasi in nisi nobis! Accusamus possimus perferendis consectetur libero \n    ut dolorem eveniet officiis aliquam. Accusantium cumque ab ratione\n    exercitationem perspiciatis!<\/p<\/span>><\/span>\n<\/section<\/span>><\/span>\n\n<section<\/span>><\/span>\n  <p<\/span>><\/span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus modi \n    quasi in nisi nobis! Accusamus possimus perferendis consectetur libero \n    ut dolorem eveniet officiis aliquam. Accusantium cumque ab ratione\n    exercitationem perspiciatis!<\/p<\/span>><\/span>\n<\/section<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
      The UI for this code looks like this. The first and third paragraphs have a blue background and white text (per selector two) and the middle paragraph, which is contained within a section with a class of highlight, has a background color of yellow per selector one.<\/p>\n\n\n\n
      \"\"<\/figure>\n\n\n\n
      If we take a look at the specificities for each selector we see that selector one has a specificity of 0-1-1 and selector two has a specificity of 0-1-2. Notice that the direct child combinator (><\/code>) and the negation pseudo-class (:not()<\/code>) do not contribute to the weight of the specificity, even though the selector inside of the negation pseudo-class does contribute.<\/p>\n\n\n\n
      \"\"<\/figure>\n\n\n\n
      Inline Styles<\/h2>\n\n\n\n
      Inline styles are added to elements via the style attribute (i.e. style=\"color: blue\"<\/code>) and override any author-defined styles. The only styles that override inline styles use the !important<\/code> declaration (which we\u2019ll discuss in the next section).<\/p>\n\n\n\n
      For code maintainability it\u2019s recommended to encapsulate your styles in external stylesheets (linked with <link rel=\"stylesheet\" href=\"...\" \/><\/code>) and don\u2019t use inline styles unless absolutely necessary.<\/p>\n\n\n\n
      Example of Inline Styles<\/h3>\n\n\n\n
      In the example below, we\u2019ve declared a style that should turn all elements with a class of paragraph<\/code> blue. However, this style is being overridden on the first paragraph by an inline style declaration which sets the paragraph color to red. The second paragraph text will still be blue.<\/p>\n\n\n
      <style<\/span>><\/span>\n  .paragraph<\/span> {\n    color<\/span>: blue;\n  }\n<\/span><\/style<\/span>><\/span>\n\n<p<\/span> class<\/span>=\"paragraph\"<\/span> style<\/span>=\"color: red;\"<\/span>><\/span>lorem ipsem<\/p<\/span>><\/span>\n<p<\/span> class<\/span>=\"paragraph\"<\/span>><\/span>lorem ipsem<\/p<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
      !important<\/h2>\n\n\n\n
      Adding !important<\/code> to the end of a style is a way for the code author to give a CSS value more weight than it has by default.<\/p>\n\n\n\n
      If two conflicting styles contain !important<\/code> declarations, the higher-specificity declaration wins. If both elements have the same weight, the last declaration wins.<\/p>\n\n\n\n
      Unfortunately, using !important<\/code> has become an \u201ceasy solution\u201d for many developers, leading to specificity chaos and unmaintainable code. !important<\/code> should not be used unless absolutely necessary. The code becomes more difficult to maintain and disrupts the natural flow of style calculations by giving more weight to selectors which don\u2019t necessarily deserve that weight.<\/p>\n\n\n\n
      !important<\/code> is a great tool for testing, aiding accessibility, or temporarily fixing an urgent problem, but it should not be considered a long-term solution.<\/p>\n\n\n\n
      Let\u2019s take a look at an example of how !important<\/code> impacts style.<\/p>\n\n\n\n
      Example of !important<\/h3>\n\n\n\n
      Here we have an unordered list with three list items, all wrapped in a div. On line two we select all list items that are direct children of an unordered list. On line 6 (div li<\/code>) we select all list items contained within a <div><\/code>.<\/p>\n\n\n\n
      Both of these selectors have equal weights (remember the direct descendent combinator, <, is unweighted) of 0-0-2, and are attempting to style the same CSS property. Under normal circumstances the selector div li<\/code> would win and the list item text would be red, however we\u2019ve added an !important<\/code> declaration to the style rule on line 3 (color: blue !important;<\/code>), which overrides the style declared on line 7 (color: red;<\/code>). Thus, the list item text is blue.<\/p>\n\n\n
      <style<\/span>><\/span>\n  ul<\/span> > li<\/span> {\n    color<\/span>: blue !important<\/span>;\n  }\n\n  div<\/span> li<\/span> {\n    color<\/span>: red;\n  }\n<\/span><\/style<\/span>><\/span>\n\n<div<\/span>><\/span>\n  <ul<\/span>><\/span>\n    <li<\/span>><\/span>Item 1<\/li<\/span>><\/span>\n    <li<\/span>><\/span>Item 2<\/li<\/span>><\/span>\n    <li<\/span>><\/span>Item 3<\/li<\/span>><\/span>\n  <\/ul<\/span>><\/span>\n<\/div<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
      \"\"<\/figure>\n\n\n\n
      Specificity Challenges<\/h2>\n\n\n\n
      Now that you\u2019ve learned the basics of CSS specificity, it\u2019s time to put it to the test. See if you can determine what the UI will look like based on the following code snippets. Answers are provided at the end of this post.<\/p>\n\n\n\n
      Specificity Challenge 1<\/h3>\n\n\n
      <style<\/span>><\/span>\n  * {\n    font-family<\/span>: `Arial`, sans-serif;\n  }\n\n  section<\/span> {\n    margin-bottom<\/span>: 24px<\/span>;\n    border<\/span>: 2px<\/span> dotted black;\n    padding<\/span>: 16px<\/span>;\n  }\n\n  button<\/span> {\n    background<\/span>: skyblue;\n    border<\/span>: none;\n    padding<\/span>: 12px<\/span>;\n  }\n\n  p<\/span> {\n    font-family<\/span>: 'Tahoma'<\/span>;\n  }\n  \n  .content<\/span> {\n    font-family<\/span>: 'Georgia'<\/span>;\n  }\n  \n  #section-1-read-more<\/span> {\n    background<\/span>: orange;\n  }\n<\/span><\/style<\/span>><\/span>\n\n<section<\/span>><\/span>\n  <h1<\/span> class<\/span>=\"title\"<\/span>><\/span>Section 1<\/h1<\/span>><\/span>\n  <p<\/span> class<\/span>=\"content\"<\/span>><\/span>Lorem ipsum dolor sit amet consectetur adipisicing elit. \n    Velit maiores...<\/p<\/span>><\/span>\n  <p<\/span> class<\/span>=\"content\"<\/span>><\/span>Lorem ipsum dolor sit amet consectetur adipisicing elit. \n    Velit maiores...<\/p<\/span>><\/span>\n  <button<\/span> id<\/span>=\"section-1-read-more\"<\/span>><\/span>Read more<\/button<\/span>><\/span>\n<\/section<\/span>><\/span>\n\n<section<\/span>><\/span>\n  <h1<\/span> class<\/span>=\"title\"<\/span>><\/span>Section 2<\/h1<\/span>><\/span>\n  <p<\/span> class<\/span>=\"content\"<\/span>><\/span>Lorem ipsum dolor sit amet consectetur adipisicing elit. \n    Velit maiores...<\/p<\/span>><\/span>\n  <p<\/span> class<\/span>=\"content\"<\/span>><\/span>Lorem ipsum dolor sit amet consectetur adipisicing elit. \n    Velit maiores...<\/p<\/span>><\/span>\n  <button<\/span> id<\/span>=\"section-2-read-more\"<\/span>><\/span>Read more<\/button<\/span>><\/span>\n<\/section<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
      Specificity Challenge 1 Solution<\/h3>\n\n\n\n
      There will be two sections. Each section will have a bottom margin of 24px, a 2px dotted border and 16px padding on all sides.<\/p>\n\n\n\n
      Each section header will have a font-family of Arial or another sans-serif font as declared by the universal selector on line 1.<\/p>\n\n\n\n
      Each paragraph will have a font family of Georgia because of the content class selector on line 22 .content<\/code> (it overrides the type selector on line 18 p<\/code>).<\/p>\n\n\n\n
      Each button will have a padding of 12px on all sides and will not have a border. Only button two will have a background color of skyblue<\/code> (defined by the type selector on line 12 button<\/code>). The first button will have a background color of orange as defined by the ID selector on line 27 #section-1-read-more<\/code>.<\/p>\n\n\n
      <style<\/span>><\/span>\n  * { \/* 0-0-0 *\/<\/span>\n    font-family<\/span>: 'Arial'<\/span>, sans-serif;\n  }\n\n  section<\/span> { \/* 0-0-1 *\/<\/span> \n    margin-bottom<\/span>: 24px<\/span>; \n    border<\/span>: 2px<\/span> dotted black; \n    padding<\/span>: 16px<\/span>;\n  }\n\n  button<\/span> { \/* 0-0-1 *\/<\/span> \n    background<\/span>: skyblue; \n    border<\/span>: none; \n    padding<\/span>: 12px<\/span>;\n  }\n  \n  p<\/span> { \/* 0-0-1 *\/<\/span>\n    font-family<\/span>: 'Tahoma'<\/span>;\n  }\n  \n  .content<\/span> { \/* 0-1-0 *\/<\/span>\n    font-family<\/span>: 'Georgia'<\/span>;\n  }\n  \n  #section-1-read-more<\/span> { \/* 1-0-0 *\/<\/span>\n    background<\/span>: orange;\n  }\n<\/span><\/style<\/span>><\/span>\n... \n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
      \"\"<\/figure>\n\n\n\n
      Specificity Challenge 2<\/h3>\n\n\n
      <style<\/span>><\/span>\n  li<\/span> > a<\/span> {\n    color<\/span>: pink;\n    text-decoration<\/span>: none;\n  }\n  \n  a<\/span>.link<\/span> {\n    color<\/span>: orange;\n  }\n\n  a<\/span>[visited=\"true\"<\/span>]<\/span> {\n    text-decoration<\/span>: underline;\n  }\n  \n  li<\/span>:first-of-type<\/span> a<\/span> {\n    color<\/span>: blue;\n  }\n<\/span><\/style<\/span>><\/span>\n<ul<\/span>><\/span>\n  <li<\/span>><\/span><a<\/span> class<\/span>=\"link\"<\/span> href<\/span>=\"#\"<\/span>><\/span>Item 1<\/a<\/span>><\/span><li<\/span>><\/span>\n  <li<\/span>><\/span><a<\/span> class<\/span>=\"link\"<\/span> href<\/span>=\"#\"<\/span> visited<\/span>=\"true\"<\/span>><\/span>Item 2<\/a<\/span>><\/span>\n  <li<\/span>><\/span><a<\/span> class<\/span>=\"link\"<\/span> href<\/span>=\"#\"<\/span>><\/span>Item 3<\/a<\/span>><\/span><\/li<\/span>><\/span>\n<\/ul<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
      Specificity Challenge 2 Solution<\/h3>\n\n\n\n
      There will be an unordered list with three items: item 1, item 2, and item 3. Item 1 will be blue because of the :first-of-type<\/code> pseudo-class selector on line 15. Items 2 and 3 will be orange. Item 2 will be underlined.<\/p>\n\n\n
      <style<\/span>><\/span>\n  li<\/span> > a<\/span> { \/* 0-0-2 *\/<\/span>\n    color<\/span>: pink;\n    text-decoration<\/span>: none;\n  }\n  \n  a<\/span>.link<\/span> { \/* 0-1-1 *\/<\/span> \n    color<\/span>: orange;\n  }\n  \n  a<\/span>[visited=\"true\"<\/span>]<\/span> { \/* 0-1-1 *\/<\/span>\n    text-decoration<\/span>: underline;\n  }\n  \n  li<\/span>:first-of-type<\/span> a<\/span> { \/* 0-1-2 *\/<\/span>\n    color<\/span>: blue;\n  }\n<\/span><\/style<\/span>><\/span>\n...\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
      \"\"<\/figure>\n\n\n\n
      Specificity Challenge 3<\/h3>\n\n\n
      <style<\/span>><\/span>\n  input<\/span>[type=\"text\"<\/span>]<\/span> {\n    border<\/span>: 2px<\/span> solid red;\n  }\n  \n  input<\/span> {\n    border<\/span>: 4px<\/span> solid purple;\n  }\n  \n  input<\/span>#first-name<\/span> {\n    border<\/span>: 6px<\/span> solid orange;\n  }\n  \n  #first-name<\/span> {\n    border<\/span>: 8px<\/span> solid black;\n  }\n<\/span><\/style<\/span>><\/span>\n<label<\/span> for<\/span>=\"first-name\"<\/span>><\/span>First name<\/label<\/span>><\/span>\n<input<\/span> id<\/span>=\"first-name\"<\/span> type<\/span>=\"text\"<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
      Specificity Challenge 3 Solution<\/h3>\n\n\n\n
      There will be a label (First name) and a text input. The text input will have a 6px solid orange<\/code> border due to the type\/ID selector on line 10 input#first-name<\/code>.<\/p>\n\n\n
      <style<\/span>><\/span>\n  input<\/span>[type=\"text\"<\/span>]<\/span> { \/* 0-1-1 *\/<\/span>\n    border<\/span>: 2px<\/span> solid red;\n  }\n  \n  input<\/span> { \/* 0-0-1 *\/<\/span>\n    border<\/span>: 4px<\/span> solid purple;\n  }\n  \n  input<\/span>#first-name<\/span> { \/* 1-0-1 *\/<\/span>\n    border<\/span>: 6px<\/span> solid orange;\n  }\n  \n  #first-name<\/span> { \/* 1-0-0 *\/<\/span>\n    border<\/span>: 8px<\/span> solid black;\n  }\n<\/span><\/style<\/span>><\/span>\n<label<\/span> for<\/span>=\"first-name\"<\/span>><\/span>First name<\/label<\/span>><\/span>\n<input<\/span> id<\/span>=\"first-name\"<\/span> type<\/span>=\"text\"<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
      \"\"<\/figure>\n\n\n\n
      You Learned Specificity!<\/h2>\n\n\n\n
      CSS specificity is tricky, but once you get the gist, it will become second nature. As one of the foundational elements of CSS, having a solid grasp of specificity will allow you to work confidently with legacy code bases and third-party libraries.<\/p>\n\n\n\n
      If you want to go further with CSS specificity, here are a few resources for you to check out!<\/p>\n\n\n\n
      More Resources on CSS Specificity<\/h3>\n\n\n\n