REDLINE MAGAZINE

このページは　E:nth-child(n) (構造擬似クラス)　のサンプルページです。

リストの3番目の要素だけ背景色をつける例。

1. ここは1番目の要素です。
2. ここは2番目の要素です。
3. ここは3番目の要素です。
4. ここは4番目の要素です。
5. ここは5番目の要素です。

リストの最初の3つの要素に背景色をつける例。

1. ここは1番目の要素です。
2. ここは2番目の要素です。
3. ここは3番目の要素です。
4. ここは4番目の要素です。
5. ここは5番目の要素です。

(2n)を利用して偶数行に背景色を指定。「しましまテーブル」を作成の例。

1行目	ここは1行目ですー。ここは1行目ですー。
2行目	ここは2行目ですー。ここは2行目ですー。
3行目	ここは3行目ですー。ここは3行目ですー。
4行目	ここは4行目ですー。ここは4行目ですー。
5行目	ここは5行目ですー。ここは5行目ですー。
6行目	ここは6行目ですー。ここは6行目ですー。

evenを利用して「しましまテーブル」を作成の例。

1行目	ここは1行目ですー。ここは1行目ですー。
2行目	ここは2行目ですー。ここは2行目ですー。
3行目	ここは3行目ですー。ここは3行目ですー。
4行目	ここは4行目ですー。ここは4行目ですー。
5行目	ここは5行目ですー。ここは5行目ですー。
6行目	ここは6行目ですー。ここは6行目ですー。

3列にfloatで並べたli要素の一番右だけマージンをなくす例。

• ここは1番目のli要素です。
• ここは2番目のli要素です。
• ここは3番目のli要素です。
• ここは4番目のli要素です。
• ここは5番目のli要素です。
• ここは6番目のli要素です。
• ここは7番目のli要素です。
• ここは8番目のli要素です。
• ここは9番目のli要素です。

floatさせたli要素の4番目ごとにclearを入れて3段組にする例。

• ここは1番目のli要素です。
• ここは2番目のli要素です。
• ここは3番目のli要素です。
• ここは4番目のli要素です。
• ここは5番目のli要素です。
• ここは6番目のli要素です。
• ここは7番目のli要素です。
• ここは8番目のli要素です。
• ここは9番目のli要素です。
• ここは10番目のli要素です。

このサンプルのCSS

#sample1 li:nth-child(3){
	background:#fcc; /* 背景色・ピンク */
	}
    
#sample2 li:nth-child(-n+3){
	background:#9cf; /* 背景色・水色 */
	}
    	
#sample3 tr:nth-child(2n){
	background:#cfc; /* 背景色・うすい緑 */
	}
    
#sample4 tr:nth-child(even){
	background:#fc6; /* 背景色・オレンジ */
	}
    
#sample5 li{
	float:left;
	display:inline;
	width:180px;
	height:100px;
	background:#fcc; /* 背景色・ピンク */
	margin:10px 10px 10px 0;
	}
#sample5 li:nth-child(3n){
	margin:10px 0;
	}
    
#sample6 li{
	float:left;
	display:inline;
	width:100px;
	min-height:80px;
	background:#cfc; /* 背景色・うすい緑 */
	margin:10px;
	}
#sample6 li:nth-child(3n+1){
	clear:left;
	}

このサンプルのHTML

<ol id="sample1">
<li>ここは1番目の要素です。</li>
<li>ここは2番目の要素です。</li>
<li>ここは3番目の要素です。</li>
<li>ここは4番目の要素です。</li>
<li>ここは5番目の要素です。</li>
</ol>

<ol id="sample2">
<li>ここは1番目の要素です。</li>
<li>ここは2番目の要素です。</li>
<li>ここは3番目の要素です。</li>
<li>ここは4番目の要素です。</li>
<li>ここは5番目の要素です。</li>
</ol>

<table id="sample3">
<tr>
<th>1行目</th>
<td>ここは1行目ですー。ここは1行目ですー。</td>
</tr>
<tr>
<th>2行目</th>
<td>ここは2行目ですー。ここは2行目ですー。</td>
</tr>
<tr>
<th>3行目</th>
<td>ここは3行目ですー。ここは3行目ですー。</td>
</tr>
<tr>
<th>4行目</th>
<td>ここは4行目ですー。ここは4行目ですー。</td>
</tr>
<tr>
<th>5行目</th>
<td>ここは5行目ですー。ここは5行目ですー。</td>
</tr>
<tr>
<th>6行目</th>
<td>ここは6行目ですー。ここは6行目ですー。</td>
</tr>
</table>

<table id="sample4">
<tr>
<th>1行目</th>
<td>ここは1行目ですー。ここは1行目ですー。</td>
</tr>
<tr>
<th>2行目</th>
<td>ここは2行目ですー。ここは2行目ですー。</td>
</tr>
<tr>
<th>3行目</th>
<td>ここは3行目ですー。ここは3行目ですー。</td>
</tr>
<tr>
<th>4行目</th>
<td>ここは4行目ですー。ここは4行目ですー。</td>
</tr>
<tr>
<th>5行目</th>
<td>ここは5行目ですー。ここは5行目ですー。</td>
</tr>
<tr>
<th>6行目</th>
<td>ここは6行目ですー。ここは6行目ですー。</td>
</tr>
</table>

<ul id="sample5">
<li>ここは1番目のli要素です。</li>
<li>ここは2番目のli要素です。</li>
<li>ここは3番目のli要素です。</li>
<li>ここは4番目のli要素です。</li>
<li>ここは5番目のli要素です。</li>
<li>ここは6番目のli要素です。</li>
<li>ここは7番目のli要素です。</li>
<li>ここは8番目のli要素です。</li>
<li>ここは9番目のli要素です。</li>
</ul>

<ul id="sample6">
<li>ここは1番目のli要素です。</li>
<li>ここは2番目のli要素です。</li>
<li>ここは3番目のli要素です。</li>
<li>ここは4番目のli要素です。</li>
<li>ここは5番目のli要素です。</li>
<li>ここは6番目のli要素です。</li>
<li>ここは7番目のli要素です。</li>
<li>ここは8番目のli要素です。</li>
<li>ここは9番目のli要素です。</li>
<li>ここは10番目のli要素です。</li>
</ul>