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';}<ol>  <li></li>  <li></li>  <li></li>  <li></li>  <li></li>  <li></li>  <li></li>  <li></li>  <li></li>  <li></li>  <li></li>  <li></li>  <li></li>  <li></li>  <li></li>  <li></li>  <li></li>  <li></li>  <li></li>  <li></li>  <li></li>  <li></li>  <li></li>  <li></li>  <li></li>  <li></li>  <li></li>  <li></li>  <li></li>  <li></li>  <li></li>  <li></li>  <li></li>  <li></li>  <li></li>  <li></li>  <li></li>  <li></li>  <li></li>  <li></li>  <li></li>  <li></li>  <li></li>  <li></li>  <li></li>  <li></li>  <li></li>  <li></li>  <li></li>  <li></li>  <li></li>  <li></li>  <li></li>  <li></li>  <li></li>  <li></li>  <li></li>  <li></li>  <li></li>  <li></li>  <li></li>  <li></li>  <li></li>  <li></li>  <li></li>  <li></li>  <li></li>  <li></li>  <li></li>  <li></li>  <li></li>  <li></li>  <li></li>  <li></li>  <li></li>  <li></li>  <li></li>  <li></li>  <li></li>  <li></li>  <li></li>  <li></li>  <li></li>  <li></li>  <li></li>  <li></li>  <li></li>  <li></li>  <li></li>  <li></li>  <li></li>  <li></li>  <li></li>  <li></li>  <li></li>  <li></li>  <li></li>  <li></li>  <li></li>  <li></li></ol>
FizzBuzz in CSS
css;fizzbuzz
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';}<ol>  <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ol>Strictly speaking, the second rule could be reduced to justol li:not(:nth-child(5n)):before {  content: counter(listCounter);}since the following rule supersedes it in for multiples of 3.