Nested CSS specificity

HTML

<section>
  <button>Click me</button>
</section>

<article>
  <p>Read me!</p>
</article>

CSS

/*
* You can remove #id selectors to see how the specificity
* of these complex selectors changes when applied
* to nested elements.
*/
section, #hero {
  button {
    color: lime;
  }
}

section button {
  color: red;
}

:is(article, #hero) p {
  color: blue;
}

article p {
  color: orange;
}