ここでは、数ある擬似クラスのうち「child系」と呼ばせていただく擬似クラスについてまとめていきたいと思います。child系というのは、私が勝手にそう呼んでいるだけなのですが、あの「child」がつく擬似クラスですね。
コンテンツ
child系の疑似クラスの特徴
child系疑似クラスの特徴は、ずばり「child」つまり、「子要素」であることに注目した擬似クラスです。ここをしっかり頭に入れておきましょう。「子要素」と一口に言ってもひとつの親要素にいろんな種類の子要素が混ざっていることがありますが、子要素の種類に関係なく「すべて兄弟」として見た場合にどう適用されるか？という視点がとても大事になる擬似クラスなのです。
ある要素が「第一子」だった場合に適用される:first-child
:first-childはある要素が第一子の子要素であった場合にデザインが適用される擬似クラスです。
ボタンで表示を切り替えてご覧ください。
See the Pen :first-child by kenichi (@ken81) on CodePen.
CSS
p:first-child{
background:#b2ffd8;
}
上の例は、p要素のうち「第一子」である要素に背景色が指定されています。実際に指定した通り背景色が入っているのが分かりますね。次の例を見てみましょう。
See the Pen :first-child02 by kenichi (@ken81) on CodePen.
CSS
p:first-child{
background:#b2ffd8;
}
先ほどと同じスタイルシートですが背景色が付いていません。よく見ると第一子の子要素はh1要素であることが分かります。つまり、ここには第一子のp要素がいないため何も起こらなかったというわけです。このように:first-childは指定された要素が「第一子」である場合にのみスタイルシートが適用される仕組みなのです。「最初に出てくるp要素」ではないので気をつけてください。
ある要素が「末っ子」だった場合に適用される:last-child
次は、:last-childを見ていきましょう。:last-childはある要素が末っ子であった場合に適用される擬似クラスです。:first-childと:last-childは「最初」か「最後」かの違いだけで、基本的に同じ原理なのでまとめて覚えてしましょう。
See the Pen :last-child01 by kenichi (@ken81) on CodePen.
CSS
p:last-child{
background:#b2ffd8;
}
上の例は、p要素が末っ子の子要素だった場合に背景色が指定されています。実際に末っ子のp要素に背景色が付いているのが確認できます。
ある要素が「一人っ子」である場合に適用される:only-child
:only-childは、ある子要素が「一人っ子」だった場合に適用される疑似クラスです。下の例をご覧ください。
See the Pen :only-child01 by kenichi (@ken81) on CodePen.
CSS
p:only-child{
background:#b2ffd8;
}
p要素が「一人っ子」だった場合に背景色が指定されています。実際に要素を見てみると、親要素が３つあって、それぞれ上から順番に二人兄弟、一人っ子・三人兄弟となっています。擬似クラスで指定した通り一人っ子のp要素に背景色が付いているのが分かります。次の例を見てみましょう。
See the Pen :only-child02 by kenichi (@ken81) on CodePen.
CSS
p:only-child{
background:#b2ffd8;
}
これも先ほどと同じスタイルシートになっていますが背景色は付きません。先ほどは一人っ子だった真ん中のp要素にh1要素が入っているので二人兄弟になったからです。兄弟となる要素が同じp要素である必要はありません。どんな要素であれ兄弟がいれば:only-childは適用されなくなるのです。
ある要素が上からn番目の子要素である場合に適用される:nth-child(n)
:nth-child(n)という擬似クラスは「n」のところに数字などを入れて指定する擬似クラスです。さっそく例を見てみましょう。
See the Pen :nth-child(3)_01 by kenichi (@ken81) on CodePen.
CSS
p:nth-child(3){
background:#b2ffd8;
}
ここでは、p:nth-child(3)つまり、p要素が３番目にある場合に背景色を入れるという設定になっています。実際に背景色がついているのが確認できますね。次の例をご覧ください。
See the Pen :nth-child(3)_02 by kenichi (@ken81) on CodePen.
CSS
p:nth-child(3){
background:#b2ffd8;
}
先ほどと同じようにp要素が３番目にある場合に背景色を入れる設定ですが、「２番めのパラグラフになってる・・・」と思わないでくださいね。一番上にh1要素が兄弟としているので、h1も含めた数になります。３番めの子要素、つまり三男のp要素に背景色が入っています。
:nth-child(n)という擬似クラスには数字の他にも「奇数」を表す「odd」や「偶数」を表す「even」を入れて指定することもできます。
See the Pen :nth-child(odd)_01 by kenichi (@ken81) on CodePen.
CSS
p:nth-child(odd){
background:#b2ffd8;
}
p要素が奇数番目にある場合に背景色を入れる設定です。
See the Pen :nth-child(even) by kenichi (@ken81) on CodePen.
CSS
p:nth-child(even){
background:#b2ffd8;
}
これはp要素が偶数番目にある場合に背景色を入れる設定です。
また、「n」を使った式で指定することもできます。具体例を見てもらうのが分かりやすいと思うので、下記をご覧ください。
See the Pen :nth-child(3n) by kenichi (@ken81) on CodePen.
CSS
p:nth-child(3n){
background:#b2ffd8;
}
これは「3n」つまり、３の倍数のp要素に対して背景色を入れる設定です。「3n」がどうして３の倍数なのかと言いますと、「n」に０,１,２,３・・・という形で順番に数字を入れていったときに「答え」となる数字だからです。このように「n」で指定した場合は、「n」に整数を０から順番に入れた数字が適用されます。
See the Pen :nth-child(3n+1) by kenichi (@ken81) on CodePen.
CSS
p:nth-child(3n+1){
background:#b2ffd8;
}
今度は「3n+1」つまり、３の倍数に１を足した数字が適用されています。ちょっと難しくなってきましたが次で最後になりますので最後までお付き合いください。
ある要素が下からn番目の子要素である場合に適用される:nth-last-child(n)
:nth-last-child(n)は、先ほどの:nth-child(n)とは逆に下から数えたときの子要素に対してデザインを適用させる擬似クラスです。数える方向が逆というだけで:nth-child(n)と仕組みはまったく同じです。
See the Pen :nth-last-child(2) by kenichi (@ken81) on CodePen.
CSS
p:nth-last-child(2){
background:#b2ffd8;
}
p要素が下から数えて２番目にあるときに背景色が指定されています。実際に下から２番目のパラグラフに背景色が付いています。この:nth-last-child(n)は、:nth-child(n)と同様に「odd」や「even」、「n」を使った指定ももちろん可能です。
以上がchild系擬似クラスのまとめでした。いろんな擬似クラスが出てきて大変だったかもしれませんが、child系はchild系としてまとめて覚えてしまうのが効率的だと思いますので、ぜひ参考にしてください。最後までお読みいただきましてありがとうございました。
