「CSSでFizzBuzz問題」への回答案

どうしてwebデザイナーに・・・CSSが書けないのか？（またはCSSでFizzBuzz問題） - mon_sat at Co-Edo（半年前の自分への教科書 / 別院）
この記事を読んで、挑戦してみた。

90分くらいかかった。その内の89分は、表示周り。
:afterで後ろにくっつけてやるのは簡単なのだが、文字を書き換えるのに苦労した。
もっと簡潔に書く方法もあるかもしれないが、今の私ではこれが限界かな。

コードは記事の最後にくっつけておくとして、どうやったか解説しておく。

よく分かる（と、いいなと思う）解説

まず、liのpositionを指定して、基準を与えておく。
で、3と5の倍数の部分の表示を、visibility: hiddenで消す。

そして、3と5の倍数のところにリストを作り、position: absoluteでtop: 0を指定。
で、中の文字をそれぞれ指定する。

これで、元の文字列は消えて、その部分に新しいリストを上書きし、文字を書ける。
ね、簡単でしょ？（90分かかった奴のセリフじゃない）

すごく大変だったけど、面白かった。
CSSはわりと触ってきたけど、セレクタをしっかり考えたり、いじりまわした経験はあまりなかったので。

他にもいろいろな言語の問題とか探して、やってみたいなと思った。

コード

もし、載せたらまずいという時は、ご連絡ください。撤去します。
コードを載せることに問題は発生しにくいかなと思ったけど、ちょっと不安なので。

ul#main li {
	position: relative;
}
ul#main li:nth-child(3n), ul#main li:nth-child(5n) {
	visibility: hidden;
}
ul#main li:nth-child(3n):after, ul#main li:nth-child(5n):after {
	visibility: visible;
	display: list-item;
	position: absolute;
	top: 0;
}
ul#main li:nth-child(3n):after {
	content: "Fizz";
}
ul#main li:nth-child(5n):after {
	content: "Buzz";
}
ul#main li:nth-child(15n):after {
	content: "FizzBuzz";
}