How to select first or last child in jss

Question

I'm using JSS(Javascript Style Sheets) in my React project. I was trying to select first-child or last-child, so I tried the following

carousel: {
  "& img:first-child": {
    padding: "0 5px"
  }
},

However, it doesn't work. In Chrome Developer tool, it correctly shows right CSS codes, however for some reaons, it selects every img tags, not just first-child. How can I select only first element in JSS?

Answer 1

JSS is just a compiler, once it produced valid CSS and you verified its correctness, you have to search somewhere else for a mistake. Your selector looks OK to me.

Answer 2

However if you just care about the first child inside a container not the type of child then you can just use

carousel: {
  "& > :first-child": {
    padding: "0 5px"
  }
},

• Generally all the child inside of a container belongs to the same type, so type of child doesn't matter everytime.