<style>
  /* Irrelevant styles go here */
  body {
    margin: 0;
    padding: 0;
  }
  section {
    margin: 0 auto;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
</style>
<main id="app"></main>
const Button = styled.button`
  display: block;
  background: lightgreen;
`

const Container = styled.aside`
  > ${Button} {
    background: yellow;
  }
`

const SafeSibling = styled(() => (
  <div>
    <Button>Safely nested</Button>
  </div>
))``

const ExtendedSibling = styled(Button)`
  font-weight: bold;
`

const FragmentSibling = styled(({ children }) => (
  <>
    <Button>{children}</Button>
  </>
))``

const Modal = () => (
  <Container>
    <Button>Extended on purpose</Button>
    <div>
      <Button>Don't select me because I'm deeper</Button>
    </div>
    <SafeSibling />
    <ExtendedSibling>A sneaky extension</ExtendedSibling>
    <FragmentSibling>A sneaky fragment</FragmentSibling>
  </Container>
)

ReactDOM.render(<Modal />, document.getElementById('app'));
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/react/16.9.0/umd/react.production.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.0/umd/react-dom.production.min.js
  3. https://cdnjs.cloudflare.com/ajax/libs/styled-components/4.3.2/styled-components.min.js