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


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.