CSS3で”Fizz Buzz”やってみた。

ウェブルのsoraiyさんがCSS3 で3の倍数の要素にスタイルを適用するなんてエントリーを書いていたので、つい出来心でやってしまいました。

今更なネタな気もしないでも無いですがそこはスルーで。
せっかくなので、nth-of-typeでやります。

デモはこちら

[css]
li {
list-style: none;
counter-increment: n;
display: inline;
}

li:after {
content: " , " counter(n);
}

li:first-of-type:after {
content: counter(n);
}

li:nth-of-type(3n):after {
content:" , Fizz";
}

li:nth-of-type(5n):after {
content:" , Buzz";
}

li:nth-of-type(15n):after {
content:" , FizzBuzz";
}

[/css]

[html]
<ol>
<li></li>
<li></li>
~略~
<li></li>
</ol>
[/html]

ちゃんとFizzBuzzになってるでしょう・・・？
別にliでやる必要性は無いんですが、同じものがたくさん並ぶときってついliでやっちゃいますよね。