:first-child selector not applying in emotion css - css

Question

I have a styled component as below
const StyledCustomComponent = styled.aside`
min-width: ${gridPts(19)};
background-color: ${HIGHLIGHT_BLUE};
flex: 0 0 auto;
${fontSize(13)}
padding: ${gridPts(2)};
#media only screen and (max-width: ${MQ_320}) {
padding: ${gridPts(1)};
}
#media only screen and (min-width: ${MQ_1285}), (min-width: ${MQ_575}) and (max-width: ${MQ_961}) {
&:first-child {
margin-top: 0;
}
}
`
When I inspect it in the browser and resize to match the media query, the :first-child style does not apply.
And the child components of the above component are styled as below
const StyledCustomComponentChild = css`
margin: ${gridPts(1)} ${gridPts(1)} 0;
#media only screen and (max-width: ${MQ_575}), (min-width: ${MQ_961}) and (max-width: ${MQ_1285}) {
display: inline-block;
float: left;
margin-right: ${gridPts(1)};
& * {
display: inline-block;
margin-right: ${gridPts(1)};
}
}
#media only screen and (min-width: ${MQ_1285}), (min-width: ${MQ_575}) and (max-width: ${MQ_961}) {
display: block;
line-height: 1.5em;
margin: ${gridPts(3)} 0;
white-space: nowrap;
&:first-child {
display: block;
}
}
`
This style is applied to the component itself instead of its first child
here is the screen shot of how the style is interpreted in the browser dev tools
Notice there is no space before :first-child
If I manually add a space through dev tools then the style is applied as expected
import styled from 'react-emotion'
const StyledDiv = styled.div`
color: turquoise;
& :last-child {
color:green;
}
& :first-child {
color: red;
}
`
render(
<StyledDiv>
<p>First</p>
<p>Second</p>
<p>third</p>
<p>last</p>
</StyledDiv>
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
Can anyone guess what might be the issue?

Answer 1

Both selectors work for me. Use a tag like <div/> or <p/> etc. before :last-child (depending on your code, it may be also another tag).
export const blogSection = css`
disaply:flex
& div:last-child {
background: #ff0000;
}
`;