web/why-is-my-css-ignored-specificity-scored-with-three-numbers.md

Why is my CSS ignored? Specificity, scored with three numbers

The web · 4 min read ·

You write `p { color: red; }`, reload, and the text stays blue. The rule is fine: two rules are competing, and yours lost the contest.

The tie-breaker is called specificity, a score of three numbers (IDs, classes, element names) compared left to right. Edit three live selectors in a tiny page, watch the scores change, and see which rule the real browser picks.

A dark card listing three CSS selectors with their specificity scores; the ID selector #note scores 1-0-0 and is highlighted as the winner.

$ ls web/

see all →
web/what-is-json-edit-it-live-and-see-why-apis-are-so-strict-about-it.md What is JSON? Edit it live and see why APIs are so strict about it When an app asks a server for data, the reply has to travel as plain text. JSON is the format most web APIs use: six kinds of value… 5 min read · 4 Oct web/html-tags-how-angle-brackets-become-a-tree-in-your-browser.md HTML tags: how angle brackets become a tree in your browser Every web page is plain text with labels in angle brackets: HTML tags. An opening tag, some content and a closing tag make an element, and… 13 min read · 1 Oct web/why-your-200px-box-is-250px-wide-the-css-box-model.md Why your 200px box is 250px wide: the CSS box model Every element on a web page is a box made of four layers: content, padding, border and margin. By default, CSS width measures only the… 8 min read · 1 Oct