.prefix-*. 
<html> element in CSS with, you know, a simple element selector, html. But what other (trivial and perhaps useless) ways can we do it? 
:not(:open) and :closed? As always, it depends. Sunkanmi Fafowora explains why :closed is currently not a thing. I’ve seen a handful of recent posts talking about the utility of the :is() relational pseudo-selector. No need to delve into the details other than to say it can help make compound selectors a lot more readable.
:is(section, article, aside, It’s possible to combine selectors to share the same set of styles. All we do is separate each selector with a comma, known as chaining selectors.
.selector-1,
.selector-2,
.selector-3 {
/* We share these styles! 🤗 */
}
.element:hover:has(+ & + *) { /* styles */ }A really handy recipe from Chris that is a perfect use case for the :has() selector. Say we have a series of card components in a row. And when one card …
A few sirens went off a couple of weeks ago when the CSS Working Group (CSSWG) resolved to add an if() conditional to the CSS Values Module Level 5 specification. It was Lea Verou’s X post that same day that …
/* Case sensitive */
a[href*='css-tricks' s] {}
/* Case insensitive */
a[href*='css-tricks' i] {}Adding an s makes the selector case-sensitive and i makes it case-insensitive.
I didn’t realize the support for @supports determining selector support was so good! I usually think of @supports as a way to test for property: value pair support. But with the selector() function, we can test for selector support …
