Comments
Losso wrote:
With two cheap tricks I got 147:
-
Put everything in a
li{}block and use the&nesting selector. -
Shorten
::beforeand::afterto:beforeand:after, as modern browsers support both, apparently.
li{counter-increment:n;&:not(:nth-child(5n)):before{content:counter(n)}&:nth-child(3n):before{content:"Fizz"}&:nth-child(5n):after{content:"Buzz"}}
It could be promising to switch from <ul>
to <ol>, but maybe that fizz-, erm, fuzzes with
the target too much? :)
Metaboat wrote:
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>Susam Pal wrote:
That's an interesting solution. It is worth noting that your solution treats the list markers as part of the output, which the version of the problem in my post avoids. One of the requirements I set out is that all text in the output sequence must be produced directly by the stylesheet. Nevertheless, your solution is an independent and interesting solution to a slightly different version of the stated problem.
Steve wrote:
You can save two characters using nesting.
li{
counter-increment: n;
&:not(:nth-child(5n))::before { content: counter(n) }
&:nth-child(3n)::before { content: "Fizz" }
&:nth-child(5n)::after { content: "Buzz" }
}
After minifying this:
li{counter-increment:n;&:not(:nth-child(5n))::before{content:counter(n)}&:nth-child(3n)::before{content:"Fizz"}&:nth-child(5n)::after{content:"Buzz"}}
Also, debatable whether this counts, but browsers don't care if you
only use one colon for ::before
and ::after so that could be another -3.
luap42 wrote:
Hi,
I think I found a solution that is just ever so slightly shorter (150 characters):
li{counter-increment:n;&:before{content:counter(n)}&:nth-child(5n){&:after{content:"Buzz"}&:before{content:""}}&:nth-child(3n):before{content:"Fizz"}}Curious if someone will find a significantly shorter solution.
~ luap42