CSS :is() pseudo class use cases

CSS :is() is a powerful selector used to target elements based on their type. In this article, we’ll show you the :is() pseudo class use cases.

CSS :is() pseudo class used to check whether an element matches a certain selector or not. It’s very useful when we have multiple elements on our page and we want to apply different styles to them based on their parentage.

Different List types

This is applied to list items inside both unordered and ordered lists.

`:is(ul, ol) li {
   list-style: square;
}`

Multiple states

The background is changed during both the focused and hovered states of the button.

`button:is(:hover, focus) {
   background: hotpink;
}`

Items inside a table row

Selects all td and th items inside the table header and footer.

`:is(thead, tfoot) tr :is(th, td) {
    background: palegreen;
}`

Multiple heading pseudo-elements

Sets some content before all H1-H3 headings

`:is(h1, h2, h3):before {
   content: ">";
}`

Nested lists

Selects the list containers that are already inside another list container.

Note:-:unsupported will not apply the style.

`ol {
    list-style-type: upper-alpha;
    color: darkblue;
}

:is(ol, ul, menu:unsupported) :is(ol, ul) {
    color: green;
    font-size: 0.8rem;
}

:is(ol, ul) :is(ol, ul) ol {
    list-style-type: lower-greek;
    color: chocolate;
}`

The first paragraph after any heading

`:is(h1, h2, h3, h4, h5, h6)+p { 
   color: blue;
}`

Conclusion

The :is() pseudo-class is a powerful tool that can be used to improve the style and usability of your web pages.