CSS previous sibling selector example

previous-sibling.scss

// 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;
		}
	}
}