これまでの授業でもCSS3の疑似クラス「:nth-child(odd)」「:nth-child(even)」や「:nth-child(3)」は使って来ましたが、()の内に数式を入れる事で非常に便利になります。
「:nth-child(2n+1)」= 「:nth-child(odd)」(奇数のみ指定)
計算式
n=0: 2*0+1= 1 = nth-child(1)
n=1: 2*1+1= 3 = nth-child(3)
n=2: 2*2+1= 5 = nth-child(5)
「:nth-child(2n)」= 「:nth-child(even)」(偶数のみ指定)
「:nth-child(3n)」= (3の倍数のみ)
「:nth-child(3n+2)」= (2番目から3つずつ)
「:nth-child(n+3)」= (3番目から全部)
「:nth-child(-n+3)」= (3番目まで全部)
nth-child()とnth-of-type()の違い
「nth-child」と「nth-of-type」の違いと使いわけをしっかりと理解しましょう。
E:nth-child(n)
親要素のn番目の子要素であるE要素ということになります。「nth-child」の使い方は授業でも度々やっているので、問題ないと思います。
E:nth-of-type(n)
問題は「nth-of-type」の方です。親要素内で同じE要素内でn番目のものということになります。
言葉にすると判り難い部分もあるので、実際にコーディングしてみましょう。
それぞれの奇数列だけ、文字色を変えてみましょう。
<ul> <li>リスト1</li> <li>リスト2</li> <li>リスト3</li> <li>リスト4</li> <li>リスト5</li> </ul>
<dl> <dt>リスト1</dt><dd>リスト1の説明</dd> <dt>リスト2</dt><dd>リスト1の説明</dd> <dt>リスト3</dt><dd>リスト1の説明</dd> <dt>リスト4</dt><dd>リスト1の説明</dd> <dt>リスト5</dt><dd>リスト1の説明</dd> </dl>
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>dlを可変</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="0809.css"> </head> <body> <div id="News_area"> <div id="News_release"> <h2 id="News_click">ニュースリリース</h2> <dl id="News_text"> <dt>2016年8月5日</dt><dd>[スプリングバレーブルワリー東京(代官山)限定]「サワーバケーション」を新発売</dd> <dt>2016年8月3日</dt><dd>「プードゥ スパークリング」を新発売</dd> <dt>2016年8月3日</dt><dd>「キリン 午後の紅茶 大人のこだわりミルクティー」9月6日(火)期間限定で新発売</dd> <dt>2016年8月3日</dt><dd>「淡麗プラチナダブル」の中味・パッケージともにリニューアル</dd> <dt>2016年8月3日</dt><dd> ディズニーの仲間たちによる夢のパーティーへご招待!「東京ディズニーリゾート(R)・ドリームパーティーキャンペーン」9月12日(月)より全国で実施</dd> <dt>2016年8月2日</dt><dd> 「シャトー・メルシャン 桔梗ヶ原メルロー 2012」、「同 北信シャルドネRDC千曲川右岸収穫 2015」が金賞・部門最高賞を受賞</dd> <dt>2016年8月1日</dt><dd>「シャトー・メルシャン」シリーズの新ヴィンテージを発売</dd> </dl> </div><!--/#News_release--> </div><!--/#News_area--> </body> </html>
@charset "utf-8"; /* CSS Document */ /* reset */ html, body, div, h1, h2, h3, h4, h5, h6,p, blockquote, pre, address,ul, ol, li, dl, dt, dd,table, th, td, form, fieldset { margin: 0; padding: 0; line-height: 1.0; font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; } ul { list-style: none; /* マーカーを消す */ } a { text-decoration: none; /* 下線を消す */ color: #222; } img { border: none; } img, input { vertical-align: bottom; } #News_area { width:960px; margin:50px auto 0; overflow: hidden; } #News_release { width:720px; float:left; } #News_area h2 { margin-bottom:20px; } dl#News_text { width:100%; overflow: hidden; } #News_text dt, dd { font-size: 12px; line-height: 22px; } #News_text dt { width:16%; text-align: center; float: left; padding: 10px 0; } #News_text dd { width:80%; padding:10px 2%; } #News_text dt:nth-of-type(odd), dd:nth-of-type(odd) { background: #999; }