cssで先頭のや最後の要素を指定するには？nth-childとnth-of-typeの使い分け

shutterstock_328511270

ブログやサイトのデザインカスタマイズをしていると「先頭や最後のこの要素だけに指定がしたいんじゃぁ~」という場合が多くあります。

力技、というか、まぁ普通にやろうとすれば、先頭の要素や最後の要素だけにクラスを指定して、そのクラスに対してCSSを定義する、なんてことをしますが、これが毎回クラス指定を書く、となると、これが結構面倒なんですね。

そんな時に大活躍するのが「nth-child」と「nth-of-type」。

CSS3で追加されたプロパティですが、使い分け、というか、それぞれの使い所が今一分からず（と私同様に思ってる方、きっと多いと思い）、ここで簡単な例を紹介します。

Contents

1 簡単な説明
- 1.1 一般的なブログ形式からの具体例
- 1.2 リスト形式からの具体例
2 nth-childとnth-of-typeの使い分け
- 2.1 具体的使い方 nth-child
- 2.2 具体的使い方 nth-of-type
3 今回のまとめ

簡単な説明

使い出すと便利でしょうがない「nth-child」、「nth-of-type」ですが、簡単に説明すると、

nth-child(n)
- ｎ番目の要素が指定された要素であれば適用
- 指定された要素でなければ適用しない
nth-of-type(n)
- 指定した要素のｎ番目に適用

一般的なブログ形式からの具体例

この２つの違いを、以下の様なブログの一般的な形式から具体例で見てみます。

<h1>タイトル<h1>
<p>導入部</p>
<h2>サブタイトル１<h2>
<p>本文１</p>
<h2>サブタイトル２<h2>
<p>本文２</p>
<h2>サブタイトル３<h2>
<p>本文３</p>
<h2>まとめ<h2>
<p>まとめ文</p>

ここで「サブタイトル１だけ」にCSSを適用したい、と考えたとします。この場合、１番始めに出てくる<h2>がその対象になりますが、その h2 を指定するには、

１）h2:nth-child(1)
２）h2:nth-of-type(1)

のどちらが良いでしょうか？

答えは２）。

１）では「nth-child」の定義に従って「最初の要素が h2 であれば適用」、ということになります。

見て分かるように最初の要素はタイトルの h1 であるため、この場合ではサブタイトル１の h2 に適用されない、となりますね？

２）では、間になにがあろうと「とにかく最初の h2 に適用」ということになり、バッチリ「サブタイトル１」に適用されます。

ここで特別に「先頭だけ」、「最後だけ」、と指定するには、

nth-childの場合
- first-child　（先頭だけに適用: nth-child(1)に同じ）
- last-child　（最後だけに適用）
nth-of-typeの場合
- first-of-type　（先頭だけに適用: nth-of-type(1)に同じ）
- last-of-type　（最後だけに適用）

という指定の仕方ができます。

上の例では以下のようになります。

１）h2:first-child
２）h2:first-of-type

リスト形式からの具体例

では、よく使われるリストなどではどうでしょう？

<ul>
<li>リスト項目１</li>
<li>リスト項目２</li>
<li>リスト項目３</li>
</ul>

実際表示すると、以下のようになります。

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

これを表のように見せたい場合、以下のように ul に外枠を指定して、li には下線を指定し、

ul{
border-:1px solid black;
/* 黒の外枠 */
padding: .25em 1em .25em;
/* 窮屈にならないよう、内側の余白を少し指定 */
}
ul li {
border-bottom: 1px solid gray;
/* 灰色の罫線を各項目の下に表示 */
list-style: none;
/* 先頭の丸を非表示 */
}