A Look Into: CSS :is Selector

The CSS :is selector is a handy pseudo-selector that simplifies complex selector queries. It allows you to group multiple selectors into a single, more readable form, which can help reduce redundancy and make your CSS more maintainable.

Before the :is selector, you’d need to repeat the same styles for multiple selectors, leading to long and repetitive code. For example, if you wanted to apply the same styles under the main element to the a and the button elements, you would write:

main a,
main button {
color: blue;
}

With the :is selector, you can group the selectors into a single line:

main :is(a, button) {
color: blue;
}

You can also combine it with other pseudo-selector, for example, the :hover, which in this example we will make the color to orange.

main :is(a, button):hover {
color: orange;
}

As you can see, the :is selector simplifies the code and makes it easier to read. It’s especially useful when you have a long list of selectors that share the same styles.

Specificity

One important thing to note about the :is selector is that it doesn’t affect the specificity of the selector. The specificity of the :is selector is the same as the most specific selector within the group. For example, in the following code:

main :is(a, button) {
color: green;
}

main a,
main button {
color: red;
}

The specificity of the :is(a, button) selector is the same as the a selector, which means that if there are conflicting styles, which ever style is defined last will be applied. In this case, we are going to see the color of the button and the anchor will turn red.

See the Pen CSS :is selector by HONGKIAT (@hkdc)
on CodePen.

But keep in mind that if there’s a more specific selector within the group, the specificity of the :is selector will be the same as that selector. For example, in the following code…

main :is(a, .btn) {
color: green;
}

main a,
main button {
color: red;
}

…we have class selector, .button, to select the button element so the specificity of the :is(a, .btn) selector is the same as the .btn selector, which means that the color of both the button and the link will turn green.

See the Pen CSS :is selector by HONGKIAT (@hkdc)
on CodePen.

Conclusion

The :is selector simplifies complex selector queries. It allows you to group multiple selectors into a single, more readable form, which can help reduce redundancy and make your code easier to read. However, keep in mind the specificity of the :is selector is the same as the most specific selector within the group, so be careful when using it in your stylesheets.

Browser Compatibility

The post A Look Into: CSS <code>:is</code> Selector appeared first on Hongkiat.