Blog
Mert Özen's blog posts on software development, backend, frontend, and DevOps.
Modern Selectors: :is(), :where(), :has(), :not() and State Pseudo-classes
:is() takes its specificity from its most specific argument, while :where() is always zero; :not() and :has() are calculated like :is(). On Bookstore's catalog and checkout pages we measure specificity through the DevTools protocol, style a book card without a cover with :has() and an invalid form row with :user-invalid without JavaScript, and show the real behavior of :focus-visible, :open, :nth-child(of S) and :empty in Chromium and WebKit.
How CSS Decides: The Cascade, Specificity, Inheritance and Cascade Layers (@layer)
The cascade decides which of the values written for an element wins, in this order: origin and importance, context, the style attribute, layers, specificity, order of appearance; layers come before specificity. We debug Bookstore's "why isn't this button red?" bug step by step through the protocol DevTools uses, move third-party CSS below our own styles with @layer, and measure inherit/initial/unset/revert/revert-layer in two browser engines.