Really useful calculator to help create the quantity queries for selectors.

Put in the element being queried, set quantity (exactly, at least, at most, between), the children elements, and wahlah. The example:

.container:has(> :nth-last-child(3):nth-child(-n + 8)) {
  /*                */
  /* your CSS here  */
  /*                */
}

Also, two useful quantity selectors…

> A collection of utility functions to more easily work with View Transitions.

Little weekend update

The data behind Baseline is what tells you if something is Newly or Widely available. It also gives you a new power, you can now look into the future of the web platform. If you are planning a project today, what’s the launch date? For a brand new site or application, that might be six months to a year from now. Rather than tying yourself to what’s Widely available today, you can probably…

Before we start, a word about browser support: the demos in this article only run on recent Chromium-based browsers because that’s where customizable selects are implemented right now. However, this feature is designed in a way that doesn’t break non-supporting browsers. After all, a customized element is still a element. So, if the browser you’re using doesn’t support customizable selects,…