WDD 231: Web Frontend Development I

CSS Specificity

Overview

CSS stands for Cascading Style Sheets. The "cascade" term represents the prioritization stack of the CSS declarations that are applied to a specific element. This order is determined by the CSS specificity value.

"Specificity is the algorithm used by browsers to determine the CSS declaration that is the most relevant to an element, which in turn, determines the property value to apply to the element. The specificity algorithm calculates the weight of a CSS selector to determine which rule from competing CSS declarations gets applied to an element" - MDN

Prepare

Calculating specificity during design can be difficult. It is recommended that you use the Elements panel in the browser's DevTools application. As you inspect an element by clicking on the element name in the panel or by selecting it from the displayed screen, the CSS rules and declarations are then shown for you to analyze and toggle on and off as needed to test.

Here are some specificity considerations:

Activity Instructions

  1. Navigate in your browser to the byui.edu home page.
  2. Open up the browser DevTools.
  3. In the footer of the page, select the Devotionals link by either, 1) right mouse clicking on the link and selecting inspect, or 2) using the Select tool in the DevTools panel bar and then selecting the link.
  4. You should have the following anchor <a> tag selected in the Elements panel: 
    <a class="FooterNavigationItem-text-link" href="https://www.byui.edu/devotionals" target="_blank">Devotionals</a>
  5. In the DevTools Styles panel, note the CSS stack for this anchor element. This panel reveals which CSS rules are applied and the declaration stack. Find the color declaration property.
    • How many color declarations are made for this element? You should find at least four (4).

      Besides the Styles tab, developers can used the Computed tab to shown the style application per property.

    • Note that the last two declarations made in the cascade were:
      color: #fff and color: var(--primaryTextColor).
    • What is the "user agent stylesheet" notation shown in the CSS stack in the Styles tab?
    • Why is the color #fff applied? Note the specificity values for each of those selectors.
    You can toggle the color: #fff by clicking on the checkbox to the left of the declaration in the Styles panel within DevTools.
    What are the actual CSS specificity values? .GlobalFooter .FooterNavigationItem-text-link is 020
    .FooterNavigationItem-text-link is 010
    a is 001
    📑Resource: CSS Calculator

Optional Resources