Specificity is a CSS rank principle that helps a browser decide which rule wins in a contradictory situation. Imagine you're a chef and receive an order for a sandwich, and the sticky note says, "One grilled cheese sandwich," and "One grilled cheese sandwich with extra tomatoes."

What kind of sandwich should you make? From the CSS perspective, the browser selects the most specific rule, and it overrides other less detailed rules. That means the chef should add extra tomatoes without thinking twice.

Each selector has its own place in the specificity ranking system:

• Inline styling always has a higher priority
• Id selectors are always more specific than universal and attribute ones
• Contextual selectors are always more specific than a single element selector
• Class selectors always win over any number of element selectors. That's why the headline from the example is blue and not black.

You can read more about ranking rules and learn the formula for calculating specificity on W3Schools.^[1]