WDD 230: 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 get used to the Elements panel in the browser's DevTools. 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.

There are many special cases in CSS specificity. Here are two to consider:

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 Devotional 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).
    • The last two declarations made were color: #fff and before that, color: var(--primaryTextColor).
    • Why is the color #fff applied? Note the specificity values for each of those selectors.
    var(--primaryTextColor) is a CSS variable that is defined in the :root selector of the page. This is a common practice to define variables for use throughout the page. This allows for easy changes to the variable value and, therefore, the value is applied throughout the page.
    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
  6. Review this basic example of specificity in action: Specificity | w3schools.com

Submission

  1. There is nothing to submit for this learning activity.

Additional Resources