ここでは、私が「type系擬似クラス」と呼んでいる擬似クラスたちについてお話していきます。type系擬似クラスというのは、~of-typeという書き方をする疑似クラスたちのことです。~-childという書き方のchild系と似通っている部分があるので、合わせて理解するとコーディングの幅がぐっと広がると思います。このページの最後の方に「child系擬似クラス」のページもご案内していますので合わせてご覧くださいね。

type系疑似クラスの特徴

type系擬似クラスは「同じ種類の要素」であることに注目した疑似クラスです。child系の擬似クラスが子要素を一括りにしてしまうのに対して、type系は「同じ階層の同じタイプの要素」だけに注目します。説明はさておき具体的な事例をみていきましょう。

指定した要素タイプのうち最初の要素を指定する:first-of-type

:first-of-typeは、指定した要素タイプのうち最初の要素だけにデザインを適用させる擬似クラスです。下記の事例をご覧ください。

ボタンで表示を切り替えてご覧ください。

See the Pen :first-of-type_01 by kenichi (@ken81) on CodePen.

CSS

p:first-of-type{
  background:#b2ffd8;
}

ここではp要素のうち最初の要素だけに背景色を入れています。

See the Pen :first-of-type_02 by kenichi (@ken81) on CodePen.

p:first-of-type{
  background:#b2ffd8;
}

同じ階層にh1要素など別の要素が先に入っていたとしても最初に出てくるp要素が対象となります。type系擬似クラスは、他のタイプの要素の影響を受けることはありません。

See the Pen :first-of-type_03 by kenichi (@ken81) on CodePen.

この疑似クラスは「同じ階層の中で最初に出てくる要素」が対象になります。そのため、親要素が複数存在する場合は、それぞれ子要素のうち最初のp要素が対象になります。ここでは親要素が３つあるので、３つのp要素に背景色が入ります。

指定した要素タイプのうち最後の要素を指定するlast-of-type

:last-of-typeは「最後」の要素が対象になります。仕組みは、先ほどの:first-of-typeと基本的に一緒です。

See the Pen :last-of-type by kenichi (@ken81) on CodePen.

CSS

p:last-of-type{
  background:#b2ffd8;
}

ここでは最後のp要素に背景色を入れました。

指定した要素タイプのうち上から数えてn番目にある要素を指定する:nth-of-type(n)

:nth-of-type(n)は「n」のところに数字などを入れて指定する擬似クラスです。まずは「n」に数字の「３」を入れてみましょう。

See the Pen :nth-of-type(3) by kenichi (@ken81) on CodePen.

CSS

p:nth-of-type(3){
  background:#b2ffd8;
}

「３」を入れたので、「３番めのp要素」に背景色が入りました。同じ階層内に見出しが２つ入っていますが、type系の擬似クラスは同じタイプの要素だけしか考慮されないので、３番目のp要素が指定されているのが分かります。

「n」のところには数字だけでなく奇数を意味する「odd」や偶数を意味する「even」を入れることもできます。下記は「odd」「even」をそれぞれ入れたバージョンです。

See the Pen :nth-of-type(odd) by kenichi (@ken81) on CodePen.

CSS

p:nth-of-type(odd){
  background:#b2ffd8;
}

奇数番目のパラグラフに背景色が入りました。

See the Pen :nth-of-type(even) by kenichi (@ken81) on CodePen.

CSS

p:nth-of-type(even){
  background:#b2ffd8;
}

こちらは偶数番目のパラグラフに背景色が入っています。

また、「n」をそのまま使って指定することもできます。下記をご覧ください。

See the Pen :nth-of-type(3n) by kenichi (@ken81) on CodePen.

CSS

p:nth-of-type(3n){
  background:#b2ffd8;
}

カッコのところが(3n)となっています。これは３の倍数のp要素に背景色を入れる設定です。このように「n」を使った場合、「n」にゼロから順番に、０,１,２,３・・・という形で数字を代入したときの答えが擬似クラスとなります。

See the Pen :nth-of-type(3n+1) by kenichi (@ken81) on CodePen.

CSS

p:nth-of-type(3n+1){
  background:#b2ffd8;
}

今度は(3n+1)としてみました。「n」にゼロから順番に数字を代入した式の答えは次の通りです。
3 × 0 + 1 = 1番目
3 × 1 + 1 = 4番目
3 × 2 + 1 = 7番目

実際に式の答えと背景色が一致しているのが確認できます。

指定した要素タイプのうちX番目以降の要素を指定する:nth-of-type(n + X)

例えば、３番目以降のリスト要素にスタイルを指定したい場合、:nth-of-type(n + 3)という数式で指定します。

See the Pen :nth-of-type(n + 3) by kenichi (@ken81) on CodePen.

CSS

li:nth-of-type(n + 3){
  background:#b2ffd8;
}

指定した要素タイプのうちX番目までの要素を指定する:nth-of-type(-n + X)

先ほどとは反対に、例えば３番目までの要素にスタイルを指定したいときは:nth-of-type(-n + 3)という形で指定します。

See the Pen :nth-of-type(-n + 3) by kenichi (@ken81) on CodePen.

CSS

li:nth-of-type(-n + 3){
  background:#b2ffd8;
}

指定した要素タイプのうち下から数えてn番目にある要素を指定する:nth-last-of-type(n)

See the Pen :nth-last-of-type(4) by kenichi (@ken81) on CodePen.

先ほどは、「上から数えてn番目」という形でしたが、:nth-last-of-type()は下から数えて何番目かという形で指定する擬似クラスです。仕組みは先ほどの:nth-of-type(n)と同じです。ここでは最後から４番めのp要素に背景色を入れてみました。

 

指定した要素タイプがひとつだけの場合に指定する:only-of-type

:only-of-typeは同じ階層の中で指定された要素タイプが１つだけしかなかった場合に適用される擬似クラスです。

See the Pen :only-of-type by kenichi (@ken81) on CodePen.

CSS

p:only-of-type{
  background:#b2ffd8;
}

ここでは、同じ階層の中でひとつだけになっているp要素を指定しています。

以上がtype系擬似クラスでした。冒頭でもお話しましたが、type系の擬似クラスはchild系と合わせて理解するといろんな場面で使い分けができて便利です。良かったら下記も合わせてご覧ください。

2017.12.06

type系擬似クラスまとめ

ここでは、私が「type系擬似クラス」と呼んでいる擬似クラスたちについてお話していきます。type系擬似クラスというのは、~of-typeという書き方をする疑似クラスたちのことです。~-childという書き方のchild系と似通っている部分があるので、合わせて...