CSSで何番目や何個分を前から、後ろから自由自在に指定するための疑似要素まとめ


スタイルシートでは、要素の何番目だけにスタイルを適用するっていうことが簡単にできます。
例えば、<p>タグとか使っていると最後の1行はマージンを取りたくないっていうことがありませんか。
商品のラインナップなどで縦横に要素を並べている時も、1番最後の列はマージンを取りたくないっていうことがあります。
そんな時に、クラス名を指定してマージンを消すとかそういったことをする人もまだいますよね。
そんなことをしなくても、前から何番目とか前から何個分とかそういった指定がスタイルシートで簡単にできます
よく使うんだけど、たまに忘れてしまうスタイルシートで何番目的な指定の仕方をまとめてみました。
個人的に忘れること多いので、備忘の為にも書いておきます。

-child -of-type
最初
1
:first-child :first-of-type
最後
2
:last-child :last-of-type
最初からX番目
3
:nth-child(X) :nth-of-type(X)
最後からX番目
4
:nth-last-child(X) :nth-last-of-type(X)
最初からX個
5
:nth-child(-n+X) :nth-of-type(-n+X)
X番から最後
6
:nth-child(n+X) :nth-of-type(n+X)
最後からX個
7
:nth-last-child(-n+X) :nth-last-of-type(-n+X)
最後からX番から以前
8
:nth-last-child(n+X) :nth-last-of-type(n+X)
Xの倍数
9
:nth-child(Xn) :nth-of-type(Xn)

わかりやすくまとめたつもりなので、ある程度わかってる人はこの表があれば備忘用には充分だと思います。
ここから下は、初心者のために補足的に説明入れておきます。

-child と -of-typeの違いの話

この特定の要素に対する指定の方法は大きく2つの指定方法があって、要素名つまりはタグの種類にかかわらず対象とする方法と、特定の要素に対してだけ(<P>だけとか)対象とする方法があります。
-childは要素の種類にかかわらず全てを対象として、-of-typeは特定の要素に対してだけ対象になります。
こんな感じですね。

type

図を見てもらったらわかるように、黄色いのが対象になる要素です。
複数の要素が混在しても、-childではすべての要素が対象になります。
-of-typeでは、その中の特定の要素(タグ)が対象です。
説明だけではわかりにくいので、以下の説明でのコードの例を簡単に見てみます。

最初の要素や最後の要素にスタイルの指定をする

:first-child / :first-of-type
1

:last-child / :last-of-type
2

先頭や最後の要素だけにスタイルを指定する場合はこれを使います。
これはすごくわかりやすいですね、要素がいくつか並んでいるときに1番先頭に対してスタイルを指定したり、1番後ろに対してスタイルを指定したりすることができます。
具体的にはこういった書き方をします

p:first-child{
    /* ここにスタイル */
}
p:first-of-type{
    /* ここにスタイル */
}

実は簡単なように思えて、この2つの意味合いがなかなか難しい。
それぞれの意味合いを答えられますか?
まずこちら

p:first-child{
    /* ここにスタイル */
}

これはどういう意味かというと、
fchild
-childの指定方法を使っているので、:first-childとは要素の種類にかかわらず一番先頭が対象になります。
上の図の赤い枠の部分が対象ということ。
その要素が<p>であればスタイルが指定されます。
上の例では<div>なので、スタイルは適用されません

p:first-of-type{
    /* ここにスタイル */
}

tchild
こちらは、-of-typeを使っているので対象は先頭で指定されている<p>要素のみ。
図の赤枠で指定されているところです。
:first-of-typeはその中で先頭のものが<p>要素であれば適用されます。
もちろん、対象が存在する場合には<p>要素のはずなのでスタイルが適用されます。

この意味の感じわかりますかね。
以下すべて同じような考え方です。

先頭からX番目の要素にスタイルの指定をする

:nth-child(X) / :nth-of-type(X)
1

:nth-last-child(X) / :nth-last-of-type(X)
2

先ほどは先頭、とか最後尾といったものだったけれど、もう少し汎用的に前から(後ろから)何番目という指定方法がこれです。
先頭からX番目とか、後ろからX番目が簡単に指定できます。
※Xを1にすれば、先頭とか最後尾という意味になるので、さきほどの:first-childなどと同じになりますね

p::nth-child(3){
    /* ここにスタイル */
}
p:nth-of-type(3){
    /* ここにスタイル */
}

p::nth-child(3) というのは、種類に関わらず前から3番目の要素が<p>要素であればそこにスタイルを指定
p:nth-of-type(3) は、前から3回目に出現する<p>要素にスタイルを指定ということです。

連続する複数個にスタイルを指定をする

:nth-child(-n+X) / :nth-of-type(-n+X)
1

:nth-child(n+X) / :nth-of-type(n+X)
2

:nth-last-child(-n+X) / :nth-last-of-type(-n+X)
1

:nth-last-child(n+X) / :nth-last-of-type(n+X)
2

次は、1つではなく複数個の要素にスタイルを指定する方法です。
これまでと同じく、先頭から数えるのか最後尾から数えるのかという2つのパターンの指定があります。
それに加えて、基準とした位置から前に向かうのか、後ろに向かうのかという2パターンを組み合わせて計4通り

まずは先頭から数える場合、基準となる位置をX番目として指定します。
その基準値から先頭に向かて選択(X位置を基準として左側)するのが :nth-child(-n+X) といった指定
その基準値から後ろに向かって選択(X位置を基準として右側)するのが :nth-child(n+X) といった設定です。

p:nth-child(-n+3){
    /* ここにスタイル */
}
p:nth-of-type(-n+3){
    /* ここにスタイル */
}

p:nth-child(-n+3) は、種類にかかわらず先頭から3つのうち<p>要素であるもの。
p:nth-of-type(-n+3) は、先頭から<p>要素3つが対象となります。
他の3つの指定方法も、前から数えるか後ろから数えるか。
また、基準点より前を対象とするのか後ろを対象とするのかといった違いですね。

特定の倍数の位置の要素にスタイルの指定をする

:nth-child(Xn) / :nth-of-type(Xn)
1

2の倍数や3の倍数など、特定の倍数の場所にある要素のみを対象とする方法です。
縦横に配列された要素とかは、この倍数の指定を使ったりします。
例えば、3列で縦に並んだ要素の一番右にはmarginを指定したくないといった場合、3の倍数のみにmarginを0とするようなことができます。

p:nth-child(3n){
    /* ここにスタイル */
}
p:nth-of-type(3n){
    /* ここにスタイル */
}

p:nth-child(3n)は、先頭から3の倍数の位置にある要素が<p>要素であれば指定
p:nth-of-type(3n)は、<p>要素だけを対象として3の倍数の<p>要素に指定される。
この:nth-childというのは何度も出てきているよね。
念のため書いておくと、これも逆から数えたければ :nth-last-child(Xn) とかが使えます
また、2n+1 といったものは2の倍数(偶数)に1を足した位置なので奇数を表します。

軽く備忘用に書こうと思っていたのですが、気がつけば結構しっかりとした記事を書いてしまいました。
よく、1番最後の要素とか、1つごとの要素にクラスをつけてクラス名でスタイルを指定している人を見かけます。
今回紹介した疑似要素の指定方法を使えば特定の要素に簡単にスタイルの指定ができます。
レスポンシブデザインでは解像度によって要素のレイアウトがよく変わるので、それに柔軟に対応していくには今回紹介した疑似要素は大変便利です。
知らなかった人は、ぜひ覚えておきましょうね。

あと1週間でゴールデンウィーク。
今年は10連休!!気分は半分ゴールデンウィークに突入しているのですがw、現実にはまだ1週間あるのでがんばりましょう・・・。


[RelService] [Service]