meet it

matches any selector in its list, with less typing.

A space in a selector means inside. .post a picks every link that is a of .post: anywhere inside it, however deep.

Now style links in three places: .post a, .sidebar a, .footer a. With :is() that becomes :is(.post, .sidebar, .footer) a. It matches when the element fits any selector in its brackets.

One catch: :is() takes the specificity of its strongest selector. Put an id in the list and the whole rule weighs as much as an id, even for elements matched by a class.

<article class="post"><a href="https://example.com/1">Read the post</a></article>
<aside class="sidebar"><a href="https://example.com/2">Popular</a></aside>
<footer class="footer"><a href="https://example.com/3">Contact</a></footer>

:is(.post, .sidebar, .footer) a {
  color: #9a3412;
  font-weight: bold;
}

Press show my page to see it here.

guess first

An id hides in the list. Which rule wins the intro link?

Guess before you run it. Wrong guesses are how you learn, and nothing is marked.

<nav id="top">
  <a class="link" href="https://example.com/">Home</a>
</nav>
<p class="intro"><a class="link" href="https://example.com/more">More</a></p>

:is(#top, .intro) a {
  color: navy;
}
.intro .link {
  color: crimson;
}

your turn

Your turn. Style every heading in one rule.

Fill in the list inside :is() so the h1, h2 and h3 inside .article all turn teal. The paragraph stays black.

the page you’re styling

<div class="article">
  <h1>Field notes</h1>
  <h2>Week one</h2>
  <h3>Day two</h3>
  <p>Rain again.</p>
</div>

your css

Your code

Press show my page to see it here.

the main heading is tealnot checked yet
the second heading is tealnot checked yet
the small heading is tealnot checked yet
the paragraph stays blacknot checked yet

fix it

The More link ignores its own rule. Can you fix it?

the page you’re styling

<nav id="nav"><a href="https://example.com/">Home</a></nav>
<p class="intro"><a class="more" href="https://example.com/more">More</a></p>

your css

Broken code to fix

Press show my page to see it here.

the More link gets its own colournot checked yet
the Home link stays darknot checked yet

.intro .more has two classes, so something heavier must be beating it. Weigh the first selector.
:is() gives the whole rule the weight of #nav, even for links inside .intro.
Use a plain selector list instead, #nav a, .intro a, so each part keeps its own weight.

nailed it

you grouped selectors with :is(). :D

A space in a selector means anywhere inside.
:is() matches any selector in its list.
It weighs as much as its strongest selector.

new words in your collection

descendant
:is()

This lesson isn’t saved. A free account remembers every lesson you finish.

:is() matches any selector in its list, with less typing.

An id hides in the list. Which rule wins the intro link?

Your turn. Style every heading in one rule.

The More link ignores its own rule. Can you fix it?

you grouped selectors with :is(). :D

matches any selector in its list, with less typing.