CSS3 で3の倍数の要素にスタイルを適用する

画像のように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;
}

コメント

コメントは受け付けていません。