CSS has evolved a lot over the years. It introduces many new powerful tools that make lives easier. From these tools, today I have picked three of them. We’ll see how :is(), :has(), and :where() pseudo-classes help simplify code, make it more readable, and reduce repetition.
This article teaches you, what, how, and why of :is(), :where(), and :has() pseudo-classes. You’ll see how we can use these pseudo-classes to design our website by writing less and more optimized code, which can be an excellent practice in software development.
As we will explore pseudo-classes, here is a basic overview in one sentence. In CSS pseudo-class is a rule that applies to an element based on a certain condition or state. Follow this link to
...
Explaining :where() pseudo-class
The :where() pseudo-class is very similar to :is(). We can group multiple selectors to reduce repetition in our code. It takes selectors as an argument. The major difference between :is() and :where() pseudo-class is that, :where() has zero specificity. This means it’s helpful when you want to style elements without adding extra weight to your CSS selector.
Style defined with :where() pseudo-class can be easily overridden. It means :where() does not add extra specificity in its selectors, and style inside :where() pseudo-class is based on selector’s own specificity.
The one good use-case for using :where() pseudo-class is to define the base style for multiple elements and you don’t want that style to affect any more specific rules that may override it later.
This way :where() allows you to apply styles without making your CSS too opinionated about which rules should win in a conflict.
/* Applying a default style */
:where(h1, p, a) {
color: red;
font-size: 20px;
}
/* More specific style */
a {
color: blue;
font-size: 16px;
}
In the above example, h1, p and a tags are provided as an argument to :where() pseudo-class for base styling. After that a tag which is used as a standalone tag with its styling can easily override the style defined in :where().
Like :is(), :where() is also supported in almost all major browsers. See an image below from caniuse.com to check supported browser versions:
In this example, you see I have created two div elements with the same .card class, in CSS by using :has() pseudo-class. By using the same .card with :has() pseudo-class, two conditions are given with different styling that you can able to see in the image output.
:has() is also supported in almost all major browsers. See an image below from caniuse.com to check supported browser versions:
. Read full article by following this link: write less CSS by using :is(), :where(), :has() pseudo-classes
SOCIAL SHARE CARD GENERATOR