Hiding empty elements with CSS :empty and :has()
A tutorial on using CSS :empty and :has() pseudo-classes to conditionally hide elements based on their content or child elements.
Tobias Ahlin Bjerrome is a design engineer at GitHub and former Spotify and Minecraft designer, writing about CSS, JavaScript, motion, data, and responsive interface design.
9 articles from this blog
A tutorial on using CSS :empty and :has() pseudo-classes to conditionally hide elements based on their content or child elements.
Explains how to use the CSS :has() pseudo-class to select and style previous sibling elements, a previously impossible task in CSS.
An introduction to A/B-testing as a method for data-driven product decisions, covering its basic principles and connection to incremental improvement.
A tutorial on using JavaScript Proxy objects to enable jQuery-like method chaining for DOM element style manipulation.
A CSS tutorial on creating more realistic and nuanced shadows using layered box-shadows for finer control over sharpness and spread.
A practical reference guide for developers transitioning from jQuery to modern vanilla JavaScript, covering common patterns and equivalents.
A tutorial on how to force line breaks and control row wrapping in CSS Flexbox layouts using a specific collapsed element technique.
A CSS-only technique to create a masonry layout using flexbox, the :nth-child() selector, and the order property, avoiding JavaScript.
A tutorial showcasing 10 practical CSS Flexbox layout patterns with ready-to-use example code for common web design scenarios.