CSS3セレクタ「nth-child」と「nth-of-type」の使い方と違い

CSS3セレクタの中でも特に使い勝手がいいと個人的に思う「nth-child」と「nth-of-type」の使い方を紹介します。似ているようで若干違いますので正しく理解しましょう。

基本的な使い方

まず、「nth-child」と「nth-of-type」の基本的な使い方を説明します。

nth-childの説明

一般的に「E:nth-child(n)」という風に表されていて、親要素のn番目の子要素であるE要素ということになります。

具体的には以下のように使います。

CSS
div p:nth-child(5){
  color : red;
}

この場合、親要素(div)のn(5)番目の子要素であるE(p)要素となります。

nth-of-typeの説明

一般的に「E:nth-of-type(n)」という風に表されていて、親要素内で兄弟関係にあるE要素でn番目のものということになります。

CSS
div p:nth-of-type(5){
  color : red;
}

この場合、親要素(div)内で兄弟関係にあるE(p)要素でn(5)番目のものとなります。

ともにCSS3で追加された

ともにCSS3で追加されたセレクタですので、ブラウザごとに対応も違っています。具体的にはIE8以下では対応していません。他はほぼ大丈夫です。

IE対策にはぜひ「IE6~8でもCSS3セレクタが利用できるツールの決定版Selectivizr」をお試しください。

両者の違い

親子や兄弟などややこしいですが、サンプルを見れば分かりやすいと思います。

以下のHTMLにCSSを適用してみます。

HTML
<div>
  <p>1つ目のpタグ</p>
  <p>2つ目のpタグ</p>
  <p>3つ目のpタグ</p>
  <h6>間にh6タグ</h6>
  <p>4つ目のpタグ</p>
  <p>5つ目のpタグ</p>
  <p>6つ目のpタグ</p>
</div>
nth-childのサンプル

先ほどのHTMLサンプルに、以下のCSSを適用します。

CSS
div p {
    background: green;
}
div p:nth-child(5) {
    background: red;
}

するとこんな感じになります。

1つ目のpタグ

2つ目のpタグ

3つ目のpタグ

間にh6タグ

4つ目のpタグ

5つ目のpタグ

6つ目のpタグ

最初に紹介したように、親要素(div)のn(5)番目の子要素であるE(p)要素にだけ違う背景色が適用されます。

ここでいう5番目の子要素にはもちろんh6タグも含まれますので、4つ目のpタグが5番目の子要素になりスタイルが適用されます。

5番目の子要素がpタグでない場合はどこにも適用されません。

nth-of-typeのサンプル

こちらも先ほどのHTMLサンプルに、以下のCSSを適用します。

CSS
div p {
    background: green;
}
div p:nth-of-type(5) {
    background: red;
}

今度はこんな感じになります。

1つ目のpタグ

2つ目のpタグ

3つ目のpタグ

間にh6タグ

4つ目のpタグ

5つ目のpタグ

6つ目のpタグ

こちらも最初に紹介したように、親要素(div)内で兄弟関係にあるE(p)要素でn(5)番目のものにだけ違う背景色が適用されます。

ここでは、pタグのなかで5番目のものですので、もちろんh6タグは数には入らず、5番目のpタグに適用されます。

n(番目)の入力方法

先ほどのサンプルでは5番目になっていましたが、数字以外にも入力できます。

nth-childで説明していますが、nth-of-typeでも同じです。

p:nth-child(5) ・・・ 5番目の要素に適用
p:nth-child(odd) ・・・ 奇数番目の要素に適用
p:nth-child(2n+1) ・・・ 奇数番目の要素に適用
p:nth-child(even) ・・・ 偶数番目の要素に適用
p:nth-child(2n) ・・・ 偶数番目の要素に適用
p:nth-child(3n) ・・・ 3,6,9,12…番目の要素に適用
p:nth-child(3n+1) ・・・ 1,4,7,10…番目の要素に適用

指定する値と何番目に適用されるかを表にしてみました。例えば「4n+2」だと、「2,6,10,14,18」番目に適用されるという感じです。

右端のように-nなんていうのもありです。

nth-child.png
一番右端の"-n-5"は"-n+5"の誤りです。ご迷惑をおかけしました。

具体的な使用例

では、最後に具体的な使用例を紹介します。

表の色付けに使う

このブログでも以前紹介しましたが、以下のように1行ごとに色が変わる表も簡単に作れます。

ブラウザ 開 発
Firefox Mozilla
Chrome Google
Internet Explorer microsoft
Safari apple
Opera Opera Software

htmlは非常にシンプルな普通のテーブルです。

html
<table>
  <tr>
    <th>ブラウザ</th>
    <th>開 発</th>
  </tr>
  <tr>
    <td>Firefox</td>
    <td>Mozilla</td>
  </tr>
  <tr>
    <td>Chrome</td>
    <td>Google</td>
  </tr>
  <tr>
    <td>Internet Explorer</td>
    <td>microsoft</td>
  </tr>
  <tr>
    <td>Safari</td>
    <td>apple</td>
  </tr>
  <tr>
    <td>Opera</td>
    <td>Opera Software</td>
  </tr>
</table>

次にCSSです。

CSS
table {
    width: auto;
    border: 1px solid #B0C4DE;
    border-collapse: collapse;
    border-spacing: 0;
}
th {
    color: #fff;
    padding: 5px;
    border-bottom: 1px solid #B0C4DE;
	border-left: 1px solid #B0C4DE;
    background: #4682B4;
    font-weight: bold;
    line-height: 120%;
    text-align: center;
}
td {
    padding: 5px;
    border-bottom: 1px solid #B0C4DE;
	border-left: 1px solid #B0C4DE;
}
tr:nth-child(2n+1) {
    background: #F0FFFF;
}
floatを3つごとにclearする

3つ横に並べて、4つ目から折り返します。具体的にはこんな感じです。

float-img-css3.png
HTML
<div id="sample">
  <li>
    <img src="画像のURL" /><br />
    <span>Google</span>
  </li>
  ・・・繰り返し・・・
</div>
CSS
#sample li{
  float:left;
  list-style:none;
  text-align:center;
  width:100px;
  margin:10px;
}
#sample li:nth-child(3n+1){
  clear:both;
}

3つ目にクラスを指定してclearさせても可能ですが、順番を変えたときに1つずつずれて面倒なことになります。

この方法だとそんな面倒な心配もありません。

リストの一番上の線を消す

これは、以前に今回と違った方法をCSSの知識をもっと深める30+2の小技テクニック集で紹介しましたが、普段あまり使わないプロパティがあって抵抗があるという場合はこういう方法もあります。

borderを使うとリストに仕切り線を入れることができます。

CSS
li {
  border-top: 1px solid #369;
}
  • メニュー 1
  • メニュー 2
  • メニュー 3
  • メニュー 4
  • メニュー 5

全体を枠で囲むときなんかは上の線がだぶってしまうので消した方がいいと思います。そんな時は以下のコードで一番上の線だけ消せます。

CSS
li {
  border-top: 1px solid #336699;
}
li:nth-child(1) {
  border-top: 0px;
}
  • メニュー 1
  • メニュー 2
  • メニュー 3
  • メニュー 4
  • メニュー 5

これについては、E:first-of-type(兄弟関係にある最初のE要素)でも対応可能です。というかこっちの方がいいかも。

まとめ

ということで、CSS3セレクタ「nth-child」と「nth-of-type」の使い方と違いを長々と説明してみました。

使用例で紹介した表などは、今まで1行ごとに直接クラスで指定して対応していましたが、「nth-child」や「nth-of-type」を使うと、煩わしい作業が省けます。

また、スタイルシートを指定するだけですので、以前に作った表にも適用することができます。

実際使う場合は、「nth-child」でも「nth-of-type」でも変わりないというケースの多いと思いますが、使うからにはちゃんと意味を理解しておきたいです。

フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント
いつも楽しく勉強させて貰っています。
WEBデザインスクールの授業で、個人サイトを作ってサーバにアップしたのですが、WebparkさんのHPにリンクを張らせていただいても良いでしょうか。
リンク先説明文につきましても指定の文章などありましたら、教えて頂きたいのでよろしくお願いします。

【2011/09/13 12:53】 | cmon #- | [edit]
comnさん

いつもお越しいただきありがとうございます。
リンクについてはもちろんオッケーです。

ただ相互リンクはおこなっておりませんのでご了承ください。

説明文については特に指定はございませんので
ご自由に書いていただいて大丈夫です。
【2011/09/14 03:42】 | 管理人 #E2ywrYdA | [edit]
わかりました。お忙しい中ありがとうございます。

では、リンクを貼らせて頂きたいと思います。
【2011/09/14 07:57】 | cmon #- | [edit]
この記事のCSSの考え方は、いろいろ応用ができそうですね。
順番を特定して、そこだけ変化させるというのが、
とっても面白いです。

今後、何かに使ってみようと思います。
その時のために、この記事をお気に入りに入れました。

ありがとうございます!
【2011/09/16 21:58】 | 晴れコーヒー #ZJFCUQBw | [edit]
コメントありがとうございます。

今回の紹介したサンプルのほかにも面白い使い方は
たくさんあると思います。

またお立ち寄りくださいね。
【2011/09/19 09:39】 | 管理人 #E2ywrYdA | [edit]
「右端のように-nなんていうのもありです。」の画像説明が
"-n-5"になっていますが、"-n+5"の間違いだと思います。
【2015/09/26 17:17】 | Misaki #mQop/nM. | [edit]
Misaki さん

ご指摘ありがとうございます。
仰るとおり"-n+5"の誤りでした。

元画像が行方不明ですので文章で訂正します。

ありがとうございました。
今後もよろしくお願いします!
【2015/09/29 06:27】 | 管理人 #E2ywrYdA | [edit]









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加