FizzBuzz in CSS

So someone challenged me to write FizzBuzz using CSS only. This was the best I could come up with, but I think the "divisible by 5, not divisible by 3" CSS rule is a bit clunky. So I'm looking for advice to provide a more readable and maintainable solution.



ol li {
list-style-type: none;
counter-increment: listCounter;
}
ol li:before {
content: counter(listCounter);
}
ol li:nth-child(3n + 3):before {
content: 'fizz';
}
ol li:nth-child(5n + 5):not(:nth-child(3n + 3)):before {
content: '';
}
ol li:nth-child(5n + 5):after {
content: 'buzz';
}


-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-


Instead of putting ol li:before { content: counter(listCounter); } on every element and cancelling out some of them with ol li:nth-child(5n + 5):not(:nth-child(3n + 3)):before { content: ''; }, I would just show the counter on elements that need it.

I don't know why you put + 3 and + 5 in the selectors — they don't appear to be necessary.



ol li {
list-style-type: none;
counter-increment: listCounter;
}
ol li:not(:nth-child(3n)):not(:nth-child(5n)):before {
content: counter(listCounter);
}
ol li:nth-child(3n):before {
content: 'fizz';
}
ol li:nth-child(5n):after {
content: 'buzz';
}


-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-




Strictly speaking, the second rule could be reduced to just

ol li:not(:nth-child(5n)):before {
  content: counter(listCounter);
}

since the following rule supersedes it in for multiples of 3.

StackExchange Code Review Q#140229, answer score: 4