I have a challenge with selecting specific children:
const useStyles = makeStyles(theme => ({
icons: {
"&>*": {
backgroundColor: "red",
},
},
}))
This is how it looks in JSX:
<Grid item>
<Grid container direction="column" classes={{ root: classes.icons }}>
<Grid item>
<img src={facebook} alt="facebook" />
</Grid>
<Grid item>
<img src={twitter} alt="twitter" />
</Grid>
<Grid item>
<img src={instagram} alt="instagram" />
</Grid>
</Grid>
</Grid>
However, I encountered an issue when trying to select all children except the last one:
icons: {
"&:not(:last-child)": {
backgroundColor: "red",
},
},
I would appreciate any help on what I might be missing. Thank you!