画像のように3の倍数の時だけ何かスタイルを適用したい場合 CSS3 の nth-child() 疑似クラスを使えば簡単に解決することができます。
HTML
1 2 3 4 5 6 7 8 9 10 11 | <ul> <li>リスト1</li> <li>リスト2</li> <li>リスト3</li> <li>リスト4</li> <li>リスト5</li> <li>リスト6</li> <li>リスト7</li> <li>リスト8</li> <li>リスト9</li> </ul> |
CSS
1 2 3 4 5 6 | ul li { float: left; } ul li:nth-child(3n) { border: 10px #000 solid; } |
コメント