11–20 of 25 posts
https://codepen.io/dsmmcken/pen/WbwYOEQ?editors=0100
p{counter-increment:n;--n:counter(n)}p:nth-child(3n){--f:"Fizz"}p:nth-child(5n){--b:"Buzz";--n:''}p::after{content:var(--f,var(--n))var(--b,'')}
Now, arguably it's not a "number or word that appears in the output", that's true, but it is a part of the logic of FizzBuzz. It's the fact that there are 100 and exactly 100 elements in the HTML part.
I mean, it wouldn't be a correct FizzBuzz without precisely that HTML. Having exactly 100 elements is implementing the part of the logic that a. loops, and b. stops at 100.
But of course this is just nitpicking, as I said ;)
data:text/html,:nth-child(3n){list-style:"Fizz"}:nth-child(5n){list-style:"Buzz"}:nth-child(15n){list-style:"FizzBuzz"}o.innerHTML=''.repeat(99)
145 using P instead of li. p{counter-increment:n} p:not(:nth-child(5n)):before{content:counter(n)} p:nth-child(3n):before{content:"Fizz"} p:nth-child(5n):after{content:"Buzz"}
p{--n:counter(n);counter-increment:n;&:before{content:var(--n)};&:nth-child(5n){--n:"";&:after{content:"Buzz"}}&:nth-child(3n){--n:"Fizz"
To nitpick a bit, I'd say there is something that is "placed outside the stylesheet". Now, arguably it's not a "number or word that appears in the output", that's true, but it is a part of the logic of FizzBuzz. It's the fact that there are 100 and exactly 100 elements in the HTML part. I mean, it wouldn't be a correct FizzBuzz without precisely that HTML. Having exactly 100 elements is implementing the part of the l…
104 :nth-child(3n){list-style:"Fizz"}:nth-child(5n){list-style:"Buzz"}:nth-child(15n){list-style:"FizzBuzz"} data:text/html, :nth-child(3n){list-style:"Fizz"}:nth-child(5n){list-style:"Buzz"}:nth-child(15n){list-style:"FizzBuzz"} o.innerHTML=' '.repeat(99)
104 :nth-child(3n){list-style:"Fizz"}:nth-child(5n){list-style:"Buzz"}:nth-child(15n){list-style:"FizzBuzz"} data:text/html, :nth-child(3n){list-style:"Fizz"}:nth-child(5n){list-style:"Buzz"}:nth-child(15n){list-style:"FizzBuzz"} o.innerHTML=' '.repeat(99)
103 :nth-child(3n){list-style:"Fizz"}:nth-child(5n){list-style:"Buzz"}:nth-child(15n){list-style:"FizzBuzz"
Earlier quoted context omitted.
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"
104 :nth-child(3n){list-style:"Fizz"}:nth-child(5n){list-style:"Buzz"}:nth-child(15n){list-style:"FizzBuzz"} data:text/html, :nth-child(3n){list-style:"Fizz"}:nth-child(5n){list-style:"Buzz"}:nth-child(15n){list-style:"FizzBuzz"} o.innerHTML=' '.repeat(99)
with help from @bulmenisaurus
Earlier quoted context omitted.
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