Ghostpia

CSS3「:nth-child」のサンプル(・ω・)

しましま

HTML

<ul class="simasima">
	<li>リスト項目１</li>
	<li>リスト項目２</li>
	<li>リスト項目３</li>
	<li>リスト項目４</li>
</ul>

CSS

.simasima li{color:#fff;}
.simasima li:nth-child(odd){background:#900;}
.simasima li:nth-child(even){background:#009;}

結果

  • リスト項目１
  • リスト項目２
  • リスト項目３
  • リスト項目４

凝ったしましま

HTML

<ul class="simasima2">
	<li>リスト項目１</li>
	<li>リスト項目２</li>
	<li>リスト項目３</li>
	<li>リスト項目４</li>
	<li>リスト項目５</li>
	<li>リスト項目６</li>
	<li>リスト項目７</li>
	<li>リスト項目８</li>
</ul>

CSS

.simasima2 li{background-color:#fcc;}
.simasima2 li:nth-child(2n){background-color:#cfc;}
.simasima2 li:nth-child(4n){background-color:#ccf;}

結果

  • リスト項目１
  • リスト項目２
  • リスト項目３
  • リスト項目４
  • リスト項目５
  • リスト項目６
  • リスト項目７
  • リスト項目８

まだ早い？

対応ブラウザじゃないとCSS3のセレクタは使えないけど‥

JQueryで使えるそうなので覚えといても良さげ。JQueryで使う際は以下の様に使用。CSS側で新しいセレクタを使用するのではなく、JQuery側でCSS3と同様のセレクタを用いてクラス名を付与し、CSSファイル側では単純にクラス名による指定を行う。

JS

/*JQuery読み込み後に指定*/
$(function(){
    	$("li:nth-child(odd)").addClass("odd");
    	$("li:nth-child(even)").addClass("even");
})

CSS

li.odd{color:blue;}
li.even{color:red;}

先に閲覧ブラウザのチェックを行い非対応ブラウザにのみ上記スクリプトが適用されるようにして、対応ブラウザではCSS3セレクタを通常通りCSSファイルに書き込めば完璧（多分）

それでもCSS3セレクタ未対応ブラウザでスクリプトもOFFだった場合の美観や視認性等も考慮する必要は残る‥。

「IE8.js」を使ってると非対応ブラウザでもnth-child()が効くみたい。さっき初めて知った(・ω・)

参考文書