The SCSS code snippet below is causing me some confusion:
li {
&.menu-item-type-custom {
margin-bottom: 10px;
a {
//
}
&:last-of-type {
margin-bottom: 40px;
}
&:first-of-type {
margin-top: 40px;
}
}
}
In this code, I am attempting to create spacing at the top and bottom of a section by targeting the first and last dynamically placed li elements.
Initially, I successfully added space at the bottom using the last-of-type selector as shown here:
&:last-of-type {
margin-bottom: 40px;
}
However, when I tried to do the same for the top using the following code:
&:first-of-type {
margin-top: 40px;
}
I encountered an issue. The style was not applied, the element did not move, and inspect element didn't show any changes. I attempted different solutions such as using &:nth-of-type(1) without success. To troubleshoot, I tested setting other properties within the &:first-of-type selector, but none worked.
Could this be my error or something else unnoticed? Is there a solution that can resolve this issue?
Thank you.