電線の画像

Pointgets.net

写真やサンプルプログラムなど、日々の気になった出来事をメモしてる個人的なブログです。

3の倍数でスタイルシートの擬似クラスを指定して出力

CSSの:nth-child()を使用して、擬似クラスを3の倍数の要素に指定して出力しました。

<!DOCTYPE html
	PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	 "http://www.w3.org/TR/html4/loose.dtd">
<html><head><title>Untitled Document</title>
<style type="text/css">
<!-- 
li:nth-child(3n){
	background-color:Whitesmoke;
}
 -->
</style>
</head>
<body>
<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>
<li>10</li>
</ul>
</body>
</html>

サンプルコードです。擬似クラスを3の倍数の要素に背景色を指定して出力します。

出力結果です。

スポンサードリンク
スポンサードリンク