<article class="card">
  <header>
    <h2>CSS Nesting</h2>
  </header>
  <div class="content">
    <p>CSS Nesting is a fairly new feature in CSS that allows us to use nested syntax when defining styles.</p>
  </div>
  <footer>
    <a href="https://developer.chrome.com/articles/css-nesting/">Read more about it</a>
  </footer>
</article>
article.card {
  border: 1px solid lightgrey;
  border-radius: 6px;
  overflow: hidden;

  & header {
    border-bottom: 1px solid lightgrey;
    background: #f1f3f4;
    padding: 16px;

    & h2 {
      margin: 0;
    }
  }

  .content {
    border-bottom: 1px solid lightgrey;
  }

  & footer a {
    background: red;
    border-radius: 4px;
    padding: 4px 8px;
    text-decoration: none;
    color: white;

    &:hover {
      background: maroon;

      &::after {
        content: ">";
        margin-left: 12px;
      }
    }
  }

  :is(.content, footer) {
    padding: 16px;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.