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;
}

See the Pen :is() Different List types by w3tweaks (@w3tweaks) on CodePen.

Multiple states

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

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

See the Pen CSS :is() Multiple states by w3tweaks (@w3tweaks) on CodePen.

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;
}

See the Pen CSS :is() Items inside a table row by w3tweaks (@w3tweaks) on CodePen.

Multiple heading pseudo-elements

Sets some content before all H1-H3 headings

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

See the Pen CSS :is() Multiple heading pseudo-elements by w3tweaks (@w3tweaks) on CodePen.

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;
}

See the Pen CSS :is() Nested lists by w3tweaks (@w3tweaks) on CodePen.

The first paragraph after any heading

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

See the Pen CSS :is() The first paragraph after any heading by w3tweaks (@w3tweaks) on CodePen.

Conclusion

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