A blog about web development, HTML, CSS, JavaScript, and web accessibility.

Day 16: the specificity of :has()

Just like with :is() and :not(), the specificity of :has() is replaced by the specificity of the most specific selector in its selector list argument. Unlike :nth-child() or :link, :has() itself doesn't add to the specificity.

Day 15: the :modal pseudo-class

There are two methods you can use to open a <dialog> element, show() and showModal(). show() opens a dialog on top of the rest of the content, but you can still interact with content beneath. showModal() opens a modal dialog with a backdrop on top of the rest of the content, and you can’t interact with the rest of the page.

Day 14: the difference between :is() and :where()

There's an important difference between :is() and :where().

Day 13: the :where() and :is() pseudo-classes

The :where() and :is() pseudo-classes allow you to write large lists of selectors in a more compact form. You can combine selectors instead of writing repetitive lists.

Day 12: max() trickery

I saw this interesting one-liner in a demo by Temani Afif.

Day 11: space-separated functional color notations

Functional color notations that existed before CSS Color Module Level 4 (rgb(), rgba(), hsl(), hsla()) used to only except comma-separated lists of arguments. That changes with Module Level 4, now you can also provide space-separated arguments.

Day 10: global styles and web components

I was wondering what happens with HTML elements in web components when I add styles to the document. Under which circumstances do global styles defined in a style element or external stylesheet apply to these elements?

Day 9: the inset shorthand property

The inset property is a shorthand for the top, right, bottom, and/or left properties. It implements the same multi-value syntax like margin.

Day 8: nesting :has()

The :has() pseudo-class cannot be nested; :has() is not valid within :has().

Day 7: subgrids

Subgrid allows a grid-item with its own grid to align with its parent grid (currently only in Firefox 71+ and Safari 16+).