<div class="container">
  <h1>CSS use of :is()</h1>
<nav>
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">CSS</a></li>
    <li class="breadcrumb-item active">:is()</li>
  </ol>
</nav>
  <div class="row">
    <div class="col-6 card">
      <p>
        Lorem ipsum dolor, sit amet consectetur adipisicing             elit. Tempora rem
      <a href="#">Read more...</a>
      </p>
    </div>
    <div class="col-6 card">
      <p>
        Lorem ipsum dolor, sit amet consectetur adipisicing             elit. Tempora rem
      <a href="#">Read more...</a>
      </p>
    </div>
  </div>
</div>
body {
  background: #efefef;
}
/* old */
/*
.container h1,
.container .breadcrumb a,
.container .card a {
  color: red;
}
*/
/* new */
.container :is(h1, .breadcrumb a, .card a) {
  color: red;
}
/* old */
/*
.container h1:hover,
.container .breadcrumb a:hover,
.container .card a:hover {
  color: red;
}
*/
/* new */
.container :is(h1, .breadcrumb a, .card a):hover {
  color: blue;
}
Run Pen

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.