How to select first or last child in jss

Viewed 12516

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?

2 Answers

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.

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.
Related