:where :is :has?

09.01.2024 — by Nesim

The :is() pseudo-class takes a comma-separated selector list and is useful to shorten large selectors. Its specificity is always the same as the selector in the list with the highest specificity.

The :where() selector does the same as :is, but always has a specificity of 0.

:has() allows us to select a parent or sibling element, allowing for specific styling that was not possible before.

Links

• MDN: has
• MDN: is
• MDN: where
• web.dev: is and where difference
• web.dev: Learn specificity
• Specificity calculator

Session CodePen :has

See this Pen on CodePen.

CodePen :where and :is

See this Pen on CodePen.

Browser Support

:where() and :is() are fully supported in all browsers since 2021.

:has() is almost there for everyone!