Fizz Buzz in CSS • Hacker News Board

Re: Fizz Buzz in CSS

#21

Post by eurleif » Sat, Dec 06, 2025, 1:06 AM UTC

Metaboat wrote: post #20

Metaboat wrote: post #18

Earlier quoted context omitted.

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

67 :nth-child(3n){list-style:"Fizz"}:nth-child(5n):after{content:"Buzz

Re: Fizz Buzz in CSS

#22

Post by Metaboat » Sat, Dec 06, 2025, 3:26 AM UTC

eurleif wrote: post #21

Metaboat wrote: post #20

Earlier quoted context omitted.

68 :nth-child(3n){list-style:"Fizz"}:nth-child(5n)::after{content:"Buzz

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,o.innerHTML=''.repeat(100):nth-child(3n){list-style:"Fizz"}:nth-child(5n):after{content:"Buzz

Re: Fizz Buzz in CSS

#23

Post by throwaway150 » Sat, Dec 06, 2025, 3:47 AM UTC

Metaboat wrote: post #22

eurleif wrote: post #21

Earlier quoted context omitted.

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, o.innerHTML=' '.repeat(100) :nth-child(3n){list-style:"Fizz"}:nth-child(5n):after{content:"Buzz

Your code is showing the numbers 5, 10, 20. that's not correct, is it?

Yours prints 1. 2. Fizz 4. 5. Buzz Fizz 7.

But it should be 1. 2. Fizz 4. Buzz Fizz 7.

Re: Fizz Buzz in CSS

#24

Post by bulmenisaurus » Sat, Dec 06, 2025, 7:17 AM UTC

Metaboat wrote: post #20

Metaboat wrote: post #18

Earlier quoted context omitted.

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"

Re: Fizz Buzz in CSS

#25

Post by smrq » Sun, Dec 07, 2025, 1:52 AM UTC

Am I the only one here who's never seen CSS counters before? Interesting feature, what are they useful for practically?