Skip to content

Instantly share code, notes, and snippets.

@doubleedesign
Last active January 28, 2024 10:47
Show Gist options
  • Save doubleedesign/918b6ae1cd259205fa062bf2ad213800 to your computer and use it in GitHub Desktop.
Save doubleedesign/918b6ae1cd259205fa062bf2ad213800 to your computer and use it in GitHub Desktop.
CSS previous sibling selector example
// 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