Running on a strange problem.
Following are two blocks of code. One of them works well and another just don't.
This work
const StyledButton = styled('button')`
// Some styles here
:first-child {
// Some other styles
}
:first-child:after {
content: 'F';
}
`
// After get applied succesfully to the first child
This doesn't
const StyledButton = styled('button')`
// Some styles here
:first-child {
// some other styles
:after {
content: 'F';
}
}
`
// After get applied to all nth child.
I'm using react-emotion
.
Is this behavior intended or am I missing something? I want to achieve that :after
should get applied to first-child only by using a similar approach to the second one.
I think there's an error in the code on the nested :after
The change that would, if I'm correct, solve your issue it to change the nested :after
to &:after
like so:
const StyledButton = styled('button')`
// Some styles here
&:first-child {//<====== note the & here
// some other styles
&:after { //<====== note the & here
content: 'F';
}
}
}
The &
is a placeholder for the parent selector, thus the code above will compile to:
button:first-child {
// some other styles
}
button:first-child:after {
content: 'F';
}
EDIT: Sandbox with working example
Hope this helps!
`
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With