CSS :is

The :is() CSS pseudo-class function allows you to simplify complex selectors by matching any element that fits a list of selectors. It helps reduce repetition and enhances readability in your CSS code.

Understanding :is()

The syntax of :is() is:

:is(selector1, selector2, selector3, ...)

For example, if you want to apply the same styles to multiple heading elements like <h1>, <h2>, and <h3>, you can use :is():

:is(h1, h2, h3) {
    color: blue;
    font-family: Arial, sans-serif;
}

This CSS rule applies the specified styles to all <h1>, <h2>, and <h3> elements.

Example Usage

Let's see an example where we style a navigation menu using :is().

HTML Code

<nav>
    <ul class="menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>

CSS Code

.menu :is(li, a) {
    display: inline-block;
    margin-right: 15px;
}

.menu a {
    text-decoration: none;
    color: #333;
}

.menu a:hover {
    color: #007BFF;
}

Result

Result:

In this example, :is(li, a) is used to apply styles to both the <li> and <a> elements within the menu, making the menu items display horizontally with spacing.

Combining :is() with Other Selectors

The :is() pseudo-class can be combined with other selectors to create more complex patterns.

Example

Suppose we want to style the first paragraph inside any <article> or <section> element.

HTML Code

<article>
    <p>First paragraph in article.</p>
    <p>Second paragraph in article.</p>
</article>

<section>
    <p>First paragraph in section.</p>
    <p>Second paragraph in section.</p>
</section>

CSS Code

:is(article, section) > p:first-child {
    font-weight: bold;
    font-size: 1.2em;
}

Result

Result:

First paragraph in article.

Second paragraph in article.

First paragraph in section.

Second paragraph in section.

Here, the first <p> inside both <article> and <section> elements is styled using :is(article, section) > p:first-child.

Benefits of Using :is()

Specificity Considerations

The :is() pseudo-class assumes the specificity of its most specific argument. For instance:

:is(.class, #id, div) {
    /* Specificity equals that of the ID selector */
}

Because #id is the most specific selector inside :is(), the entire selector inherits its specificity.

Example with Classes and IDs

HTML Code

<div class="box">This is a box.</div>
<div id="special">This is a special box.</div>
<p>This is a paragraph.</p>

CSS Code

:is(.box, #special) {
    border: 2px solid #333;
    padding: 10px;
    margin-bottom: 10px;
}

Result

Result:
This is a box.
This is a special box.

This is a paragraph.

Both the <div> with class box and the one with ID special receive the same styling due to :is(.box, #special).

Conclusion

The :is() pseudo-class is a powerful addition to CSS, enabling more concise and maintainable code. By grouping selectors, you reduce repetition and improve readability. Remember to consider specificity rules when using :is() to ensure your styles apply as intended.