Last active
January 28, 2024 10:47
-
-
Save doubleedesign/918b6ae1cd259205fa062bf2ad213800 to your computer and use it in GitHub Desktop.
CSS previous sibling selector example
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// I have sections (called blocks here) that should have top and bottom padding, | |
// unless two of the same kind with the same background colour are together - | |
// in which case I want them to be right up next to each other - no padding between them. | |
// In the HTML it looks something like this: | |
// <section class="block my-special-block has-primary-background-color"> | |
.block { | |
padding-top: map-get($spacing, 'lg'); | |
padding-bottom: map-get($spacing, 'lg'); | |
} | |
@each $colour, $value in $colours { | |
.my-special-block.has-#{$colour}-background-color { | |
// This is effectively a previous sibling selector, removing the bottom padding from the first special block | |
&:has(+ .my-special-block.has-#{$colour}-background-color) { | |
padding-bottom: 0; | |
} | |
// Use the next sibling selector (+) to remove the top padding from the second special block | |
+ .my-special-block.has-#{$colour}-background-color { | |
padding-top: 0; | |
} | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment