覚えると便利なnth-child() - WEBサイト制作の勉強

これまでの授業でも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>リスト１</li>
<li>リスト２</li>
<li>リスト３</li>
<li>リスト４</li>
<li>リスト５</li>
</ul>

<dl>
<dt>リスト１</dt><dd>リスト１の説明</dd>
<dt>リスト２</dt><dd>リスト１の説明</dd>
<dt>リスト３</dt><dd>リスト１の説明</dd>
<dt>リスト４</dt><dd>リスト１の説明</dd>
<dt>リスト５</dt><dd>リスト１の説明</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;
}