Using nested pseudo css selectors with react-emotion

Question

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.

Answer 1

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!

`