Phase 1: Web Fundamentals

Selectors, specificity & the cascade

Beginner ~3 min read
Think of it this way A friendly analogy. Read this if the technical version feels dense. Show Hide

Imagine you're building a super cool LEGO creation, like a giant castle or a speedy spaceship. You have a huge pile of LEGO bricks, and you also have instructions on how to make your creation look awesome. In the world of websites, your webpage is like that LEGO creation, and all the different parts of it (words, pictures, buttons) are like your LEGO bricks.

Now, let's say you want to color all the "wall" bricks of your castle red, or maybe make all the "window" bricks sparkle. How do you tell your LEGO instructions to pick out just those specific bricks? That's what selectors are for! They're like special magic magnets that can grab exactly the bricks you want. You could say, "Grab all the flat 2x4 bricks!" or "Grab all the bricks that are part of the 'royal tower' section!" or even "Grab that one unique brick that's the king's special crown!" Using these selectors helps you make sure you're changing the right parts of your website.

But what happens if you have two instruction cards for the same exact brick? One card might say, "All wall bricks should be red," but another card might say, "The wall bricks for the secret passage should be blue." If one of your wall bricks is also part of the secret passage, which instruction wins? This is where specificity comes in. Specificity is like a popularity contest for instructions! The more specific instruction wins. An instruction for "all wall bricks" is pretty general. An instruction for "all bricks in the 'secret passage' group" is more specific. And an instruction for that one unique king's crown brick is the most specific of all. The more specific rule usually gets to decide what the brick looks like.

Then there's the cascade, which is like the master LEGO builder who reads all the instruction cards you have – from the big official instruction book that came with your LEGO set, to the special notes you wrote yourself, to tiny sticky notes you put right on a specific brick. The cascade is the clever system that sorts through all these rules, figures out which ones are most specific (thanks to specificity!), and applies them in the right order. It makes sure that even if you have a lot of different instructions, your final LEGO creation (your webpage) ends up looking exactly how you planned it.

So, when you're building your own websites, understanding selectors, specificity, and the cascade means you can always make sure you're picking the right parts and telling them exactly how you want them to look, no matter how many other instructions are floating around!

When you write CSS, you need a way to tell the browser which HTML elements you want to style. That's where selectors come in. They are patterns used to select specific elements for styling. Think of them as pointers. For example, p selects all paragraph tags, .my-class selects all elements with class="my-class", and #my-id selects the single element with id="my-id". Understanding selectors is the first step to applying styles exactly where you intend them to appear on your webpage.

What happens if multiple CSS rules try to style the same element with conflicting properties (e.g., two rules trying to set the color of a p tag differently)? This is where specificity steps in. Specificity is a scoring system the browser uses to determine which CSS rule's declaration is most relevant and should be applied. More specific selectors "win" over less specific ones. For instance, an ID selector (#my-id) is more specific (has a higher score) than a class selector (.my-class), which in turn is more specific than a type (tag) selector (p). Inline styles (styles written directly in the HTML element's style attribute) are even more specific than ID selectors.

Finally, all these concepts fall under the umbrella of the cascade. The cascade is the overarching algorithm browsers use to resolve conflicts when multiple styles apply to an element. It's a set of rules that determines the final computed style of an element. When styles conflict, the cascade considers three main factors in order: 1) Importance: Declarations with !important override most other rules (use sparingly!). 2) Specificity: As discussed, more specific selectors win. 3) Source Order: If two rules have the exact same specificity and importance, the one that appears later in the stylesheet (or in the linked stylesheets) wins. Understanding selectors, specificity, and the cascade empowers you to predict and control exactly how your web pages will look.

Key Takeaways

  • Selectors are patterns used to target specific HTML elements for styling.
  • Specificity is a scoring system that determines which conflicting CSS rule's styles apply.
  • The cascade is the browser's overall algorithm for resolving style conflicts, considering importance, specificity, and source order.
  • ID selectors are more specific than class selectors, which are more specific than tag selectors.
  • When specificity and importance are equal, the last declared style in the source order wins.

Code Example

Preview

How this code works

This code example illustrates how CSS determines which styles to apply to an element when multiple rules could affect it, a core concept known as "specificity" and "the cascade." It shows a single paragraph of text (<p>Welcome to CSS fundamentals!</p>) that has three different color styles defined for it, but only one will actually be visible in the browser, demonstrating how CSS resolves these conflicts.

The stylesheet defines three distinct color properties for the p element. Initially, all p elements are given a color of blue by the p selector. A more specific rule targets elements with the class .highlight, setting their color to green. The most specific rule targets the element with the ID #intro, which sets its color to red. The subtle but crucial point here is that the browser prioritizes these rules based on their specificity, not their order in the stylesheet. Because the #intro ID selector is the most specific among the three, its color: red; rule overrides the others, making the text red. If the #intro ID were removed from the HTML, the .highlight class's green color would then take effect, as it's more specific than the general p selector.

Resources

Related Articles

Hand-picked reads to go deeper on css fundamentals.

Back to Frontend Developer Roadmap