Front end
CSS selector and cascade explainer
Paste a selector and see what it actually matches and what it weighs. Paste several and see which one wins, and the precise reason the others lost.
Subscribe to My Newsletter
Subscribe to my email newsletter to get the latest posts delivered right to your email. Pure inspiration, zero spam.
Recommended for You
Fluid type calculator
Fluid type is a straight line between two points and the arithmetic catches everyone out. Enter four numbers, take the clamp, and see what it computes at any width.
Flexbox playground
Every flexbox tool shows you the result. This one tells you why the items went there, including the direction swap that makes justify-content and align-items change roles.
[…] every selector, side by side The reason each losing rule lost Handles is, where, not and important Open the calculator Free · runs in your browser · no […]
[…] compared directly The exact reason each losing rule lost Handles is, where, not and important Open the calculator Free · runs in your browser · no […]
[…] correctly Weight and match shown for every selector Names the reason each losing rule lost Open the calculator Free · runs in your browser · no […]
[…] selectors side by side Names why the rule you expected lost Handles is, where, not and important Open the calculator Free · runs in your browser · no […]
[…] set the same property Names the reason each losing rule lost Handles is, where, not and important Open the calculator Free · runs in your browser · no […]
[…] and InheritanceArticleSpecificity CalculatorCode […]