TIL of using the "is" property

POSTED ON: Apr 18, 2022

The :is() CSS pseudo-class function takes a selector list as its argument, and selects any element that can be selected by one of the selectors in that list. This is useful for writing large selectors in a more compact form.

The MDN

header p:hover,
main p:hover,
footer p:hover {
  color: red;
  cursor: pointer;
}

/* The above is equivalent to the following */
:is(header, main, footer) p:hover {
  color: red;
  cursor: pointer;
}

via r/steve8708's subreddit post

Related TILs

Tagged: css

TIL the alternate keyword

If 'alternate' appears along with the stylesheet keyword, the linked file is an alternative stylesheet. It won’t be applied to the document, but it will be ready for when we need it.

Mar 18, 2023

TIL Logical Properties

For that sweet sweet Internationalization you want to avoid directional words like 'left', 'right', 'top', and 'bottom'.

Mar 11, 2023

TIL Using pseudo-classes in your querySelector!

let notTuna = document.querySelectorAll('.sandwich:not(.tuna)')

Mar 02, 2023

Next: TIL about Negative CachingIf you're ever working on a site and get a 'Server Not Found', then fix it (so that it totally works), and you STILL get a 'Server Not Found', that's negative catching!
Previous: TIL about switching out of JS Classes and into JS ModulesA classes are just blueprints for creating objects. A class encapsulates data and functions that manipulate data. A module is a file that exports features, such as variables, objects, and functions, that can be used elsewhere.