Is there a more dynamic way to target siblings in CSS / SCSS? The code I'm working on looks like this - All the way up to 50... (Not ideal)
There can be anywhere from 1 to 100 anchor/div combinations, but more often than not in single digits so there's almost always a lot of redundant CSS rules.
I was wondering if there was a better way to write the CSS / SCSS for this rather than code for each possible outcome manually?  Or would the only way to do this be by using JS?
.content { display: none; }
.anchor-1:hover ~ .content-1,
.anchor-2:hover ~ .content-2,
.anchor-3:hover ~ .content-3,
.anchor-4:hover ~ .content-4,
.anchor-5:hover ~ .content-5 { display: block; }

I also have the code fiddled here: https://jsfiddle.net/rn437pw8/8/
There is! You can use :nth-child() with plenty of ways to select children elements of particular wrapper, for example odd or even elements, a range of elements, 3 elements after 4 other elements and repeat.
Check this generator to create a rule and help you visualize what elements will be selected:
https://css-tricks.com/examples/nth-child-tester/
Docs:
https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child