Currently utilizing CSS (specifically SCSS) to style the same element on various media sizes - A, B, and C.
Utilizing the following for A:
&:nth-of-type(2n+1) {
clear: both;
}
For B:
&:nth-of-type(3n+1) {
clear: both;
}
Finally, for C:
&:nth-of-type(4n+1) {
clear: both;
}
The styles are cascading from A to B, then to C. Hence, "2n+1" is inadvertently applied to B and C, whereas "3n+1" is incorrectly applied to C.
To rectify, I tried resetting the properties for B and C with "2n+1" using:
&:nth-of-type(2n+1) {
clear: none;
}
Subsequently, attempted to reset the property specifically for "3n+1" in C by doing:
&:nth-of-type(3n+1) {
clear: none;
}
However, this approach was ineffective as "2n+1" evaluated to true in both B and C, while "3n+1" remained active in C, resulting in "clear: none" being wrongly applied.
Seeking guidance on how to properly reset or deactivate a selector (nth-of-type) once it's been set, or alternatively, ways to remove a "clear" property within a selector. Thank you!