How to select first or last child in jss

jss
Jae P. picture Jae P. · Sep 14, 2018 · Viewed 8.8k times · Source

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

Oleg Isonen picture Oleg Isonen · Sep 14, 2018

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.

Related questions

How to add multiple classes in Material UI using the classes props

Using the css-in-js method to add classes to a react component, how do I add multiple components? Here is the classes variable: const styles = theme => ({ container: { display: 'flex', flexWrap: 'wrap' }, spacious: { padding: 10 }, }); Here is how I used it: return ( &…

Read More
How to change the border color of Material-UI <TextField/>

I can't seem to figure out how to change the outline color of an outlined variant I looked around GitHub issues and people seem to be pointing towards using the "InputProps" Property but this seems to do nothing. Here is …

Read More
How to set default value in material-UI select box in react?

I am using Select box from material-ui I want to show "select the value" option by default selected but after that user is not able to select this option. <FormControl required className={classes.formControl}> <InputLabel htmlFor="circle"&…

Read More