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

- リンク: https://torounit.com/blog/css3%e3%81%a7fizz-buzz%e3%82%84%e3%81%a3%e3%81%a6%e3%81%bf%e3%81%9f%e3%80%82/
- 公開日: 2011-05-25T09:20:50+09:00
- 作成者: Toro\_Unit

ウェブルの[soraiy](http://twitter.com/soraiy)さんが[CSS3 で3の倍数の要素にスタイルを適用する](http://weble.org/2011/05/24/css-nth-child)
なんてエントリーを書いていたので、つい出来心でやってしまいました。

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

[デモはこちら](https://torounit.com/blog/demo/fizzbuzz.html)

[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でやっちゃいますよね。