スタイルシートを見ていて謎の記号にぶつかることってありますよね。
例えば、こんな感じのものです。
- 疑似要素
- ::after
::before
::first-letter - 擬似クラス
- :last-child
:first-child
:nth-child(n)
:nth-last-child(n)
:nth-of-type(n)
これらは「疑似要素」「擬似クラス」と言われているものです。これが使えるようになったら、スタイルシートの上級者の仲間入りだと思います。ここでは細かい定義はさておき、実際にどのような場面で使えるのかに焦点を当て、例を通してお話していきます。
コンテンツ
疑似要素の使い方
まず最初に擬似要素の使い方を見ていきましょう。「擬似要って何？」と思うかもしれませんが、定義を覚えるよりも具体例を見た方が理解が早いので具体例を見ていきましょう。
テキストの前にアイコンなどを表示させたいとき使う擬似要素::before
::beforeは、セレクタの前（before）に擬似的な要素を表示させたいときに使います。::beforeは必ずcontentプロパティとセットで下記のように使用します。
セレクタ::before{
content:"表示させたいもの";
}
具体的な使い方を見てみましょう。
ボタンで表示を切り替えてご覧ください。
See the Pen list_before01 by ken (@ken81) on CodePen.
スタイルシートの書き方を見てみましょう。
li::before{
content:"◎";
color:#cc0000;
margin-right:0.5em;
}
上はliタグの手前に::beforeを使って「◎」を表示させています。
このように::beforeはcontentプロパティと一緒に使います。contentプロパティは、指定したセレクタの手前に要素を入れるためのプロパティです。
疑似要素::beforeで画像を表示させる方法
先程は、content:"◎";という形でテキストを表示させましたが、contentプロパティには画像を入れることもできます。
画像を表示させるには、
CSS
セレクタ::before{
content:url(画像パス);
}
このような形で画像URLを入力します。実際に使ったところを見てみましょう。
See the Pen list_before02 by ken (@ken81) on CodePen.
人差し指の画像をliタグの手前に入れてみました。
疑似要素::beforeでWEBアイコンフォントを表示させる方法
最近は、画像ではなくアイコンフォントを使う機会も多いと思うので疑似要素::beforeでアイコンフォントを表示させる方法も見てみましょう。
See the Pen list_before02 by ken (@ken81) on CodePen.
赤いチェックマークは見た目は画像のようですが、実はフォントでできています。ちょっと仕組みがややこしくなってしまっているかもしませんが、下記のような仕組みでアイコンフォントを表示させています。
CSS
セレクタ::before{
content:'アイコンフォントを表示させるコード';
font-family: アイコンフォントに応じたfont-family;
}
このようにWEBアイコンフォントで表示すると、アイコンの色の変更がcolorプロパティでできるので、とても便利なんです。WEBアイコンフォントの使い方にはちょっとコツがあるので、詳細を知りたい方は下記をご覧ください。
テキストの右側にコンテンツを表示させる疑似要素::after
::beforeはセレクタの前にコンテンツを入れる疑似要素でしたが、::afterはセレクタの後（after）にコンテンツを入れる疑似要素です。使い方は::beforeと変わらないので、一例のみご紹介します。
See the Pen after01 by ken (@ken81) on CodePen.
※注意事項
疑似要素でテキストを表示させた内容は、HTMLソースには表示されません。つまり、表示させたテキストはSEO上無意味なキーワードとなりますので、気をつけてください。
最初の文字だけ変える疑似要素::first-letter
この疑似要素は、見出しのデザインなんかによく使われています。最初の文字だけ大きくしたり、色を変えてみたりして見出しにアクセントを付けたいときに有効です。
CSS
セレクタ:first-letter{
プロパティ: 値;
}
上記のように設定すると、セレクタで指定したテキストの最初の文字だけにデザインが適用されます。
See the Pen :first-letter by kenichi (@ken81) on CodePen.
疑似クラスの使い方
疑似要素の次は、擬似クラスについて見ていきましょう。疑似クラスというのは、擬似的なclassのようにセレクタを指定するものです。私はそんな感じで理解しています。
最初の子要素を指定する:first-child
同じ階層に同じ要素が複数あった場合に、最初の要素を指定するのが:first-childです。
CSS
セレクタ:first-child{
プロパティ: 値;
}
こんな感じで指定します。
See the Pen first_child by ken (@ken81) on CodePen.
最後の子要素を指定する:last-child
次は、同じ階層にある複数の要素のうち一番最後の要素（末っ子）を指定する疑似クラスです。
See the Pen last_child by ken (@ken81) on CodePen.
child系の擬似クラスはちょっと扱い方に癖がある擬似クラスなので、下記で詳しい使い方を説明しています。良かったら参考にしてみてください。
n番目の要素を指定する:nth-child(n)
:nth-child(n)は(n)のカッコ内に数字などを入れることで、同じ階層内の特定の順番にある要素を指定できる擬似クラスです。
See the Pen nth-child(n) by ken (@ken81) on CodePen.
CSS
tr:nth-child(3){
background:#b2ffd8;
}
ここでは「n」のところに「3」を入れて３番目のtrタグに背景色を入れてみました。
奇数番目を指定する:nth-child(odd)
:nth-child(n)のカッコ内には数字だけでなくodd（奇数）などを入れて指定することもできます。この場合、偶数番目の要素のみにデザインを適用させることができます。
See the Pen nth-child(odd) by ken (@ken81) on CodePen.
偶数番目を指定する:nth-child(even)
今度は、偶数（even）で指定してみました。
See the Pen nth-child(even) by ken (@ken81) on CodePen.
以上が疑似要素・擬似クラスの使い方でした。
