material ui :nth-child() and nextjs is not working? - css

Question

Hello and thank you for reading my question..
I am using NextJS for my personal website and material ui. Now I render dynamically some pieces of data and I want some children to be shown on a specific position using :nth-child but it doesn't seem to work.
The parent component is position relative and the element I am targeting is absolute. I tried different versions of it and some people's post here but it doesn't seem to be working.
Thank you very much :)
'&: first-child': {
top: '35%',
zIndex: 4,
},
'&: last-child': {
top: '20%',
zIndex: 4,
},
or
'&: nth-child(1)': {
top: '35%',
zIndex: 4,
},
'&: nth-child(2)': {
top: '20%',
zIndex: 4,
},
'&:nth-child(1)': {
top: '35%',
zIndex: 4,
},
'&:nth-child(2)': {
top: '20%',
zIndex: 4,
},
<Box
sx={{
display: 'flex',
flexWrap: 'wrap',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
position: 'relative',
gap: 4,
}}
>
{projects.map(({ title, details, id, img }) => {
return (
<ScaleBox duration={1} delayOrder={rand(1, 12)}>
<Image
src={img}
alt="Picture of the author"
width={500}
height={500}
loading="eager"
priority={true}
className={classes.img}
/>
<Grid container className={classes.project} id="projects">
<div>
<Image src="/folder.svg" width={30} height={30} alt="project" />
</div>
<Typography className={classes.title}>{title}</Typography>
<Typography className={classes.details}>{details}</Typography>
</Grid>
</ScaleBox>
);
})}
```
The element that I want to apply the styles is the ``classes.project`` and I added below the selector styled:
```
project: {
position: 'absolute',
// top: '25%',
left: '55%',
flexDirection: 'column',
width: '600px',
height: '230px',
// maxWidth: '400px',
borderRadius: '8px',
padding: '25px',
background: '#161e26',
gap: 4,
cursor: 'pointer',
transition: 'ease 0.5s',
zIndex: 4,
boxShadow:
'rgb(0 0 0 / 20%) 0px 12px 28px 0px, rgb(0 0 0 / 10%) 0px 2px 4px 0px, rgb(116 116 116 / 5%) 0px 0px 0px 1px inset',
'&:hover': {
transform: 'translate(0, -20px)',
},
},
'&:nth-child(1)': {
top: '75%',
zIndex: 4,
},
'&:nth-child(2)': {
top: '50%',
zIndex: 4,
},