Hacker News new | ask | show | jobs
by Metaboat 192 days ago
104 :nth-child(3n){list-style:"Fizz"}:nth-child(5n){list-style:"Buzz"}:nth-child(15n){list-style:"FizzBuzz"}

data:text/html,<style>:nth-child(3n){list-style:"Fizz"}:nth-child(5n){list-style:"Buzz"}:nth-child(15n){list-style:"FizzBuzz"}</style><ol id=o><script>o.innerHTML='<li>'.repeat(99)</script>

2 comments

89: :nth-child(3n)::marker{content:"Fizz"var(--b,)}:nth-child(5n){list-style:"Buzz";--b:"Buzz

with help from @bulmenisaurus

103 :nth-child(3n){list-style:"Fizz"}:nth-child(5n){list-style:"Buzz"}:nth-child(15n){list-style:"FizzBuzz"
98 :nth-child(5n){list-style:""}:nth-child(3n){list-style:"Fizz"}:nth-child(5n)::after{content:"Buzz"
95 :nth-child(5n){list-style:}:nth-child(3n){list-style:"Fizz"}:nth-child(5n)::after{content:"Buzz
68 :nth-child(3n){list-style:"Fizz"}:nth-child(5n)::after{content:"Buzz
This version fails for numbers like 5, showing "5. Buzz". In the case of a number divisible by 5 but not 3 nothing prevents the 5 in the ::marker from rendering.

Edit: it looks like your version can be fixed into a working 85:

  :nth-child(5n){list-style:'';&:after{content:"Buzz"}}:nth-child(3n){list-style:"Fizz"
67 :nth-child(3n){list-style:"Fizz"}:nth-child(5n):after{content:"Buzz
thank you sir! i can improve the html op css was 152, we have the whole page at 144

data:text/html,<ol id=o><script>o.innerHTML='<li>'.repeat(100)</script><style>:nth-child(3n){list-style:"Fizz"}:nth-child(5n):after{content:"Buzz