<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
This Pen doesn't use any external CSS resources.