本当に使える！CSS疑似要素3つ

CSS疑似要素とは

CSS疑似要素とは、HTMLではなくCSSを使って疑似的に作成した要素をページの指定した部分へ挿入することのできる便利なものです！
・・・よくわかりませんね。
実際にどんな事ができるのか見てみましょう。

「:before」は要素の直前に挿入する

たとえばリストの左端にアイコンを入れるようなデザインをしたい場合

こんな時にはli要素またはa要素の背景に「>」の画像を差し込むようなCSSを作成するかと思います。
でもこれをCSSだけで書き込むことができるんです！

CSSはこんな感じになります。
li要素はデフォルトでついているリストスタイルと余白を無くしておいてくださいね。
:beforeはどの部分に差し込まれるのかについてですが、要素の直前です。

赤字で示した部分へCSSを使って要素が差し込まれ、装飾を加える事ができるんです。
もう一点注意してほしい部分があります。
それはCSSの「content:””;」です。
これがなければ:before疑似要素が出てきませんので、必ず入れる様にしてください。

文字を入れる事もできる

「content:””;」の「”（ダブルクォート）」の間に文字を入れれば、その文字がそのまま表示できます。
繰り返して表示させたい文字をCSSを使って入れる事ができますよ。

「:after」は要素の直後に挿入する

「:before」に対して「:after」は要素の直後にさしこまれます。
例えば右端にアイコンを入れるようなデザインをする場合

:beforeと同じようにCSSで装飾ができるんです。
実際に見てみましょう

CSSはこうですね。
「:before」だった箇所が「:after」に変わるだけです。
:afterは要素の直後に差し込まれるので

赤字で示した部分へ「:after要素」が差し込まれるようになります。
こちらもCSSの「content:””;」は必須ですので注意してください。

文字を入れる事もできる

「:before」と同じく、「content:””;」の「”（ダブルクォート）」の間に文字を入れれば、その文字がそのまま表示できます。

:beforeと:afterはHTML要素と同じ装飾ができる

:beforeと:afterはCSSを使った疑似要素ですが、HTML要素と同じ扱いができます。
なのでCSSを使って横幅（width）を持たせたり、背景画像（background-image）を入れたりすることが出来るので、様々な装飾に使う事ができるんです。
ホームページを制作していると、本当に便利な機能です。
試しに使ってみると効果が分かると思いますので、ぜひ試してみてください。

上から数えてn番目の要素を指定する「:nth-child(N)」

複数並んだ要素の特定の位置を指定する場合、その位置にclassやidを与えなければいけませんよね？

上記のような場合です。これもCSSだけで指定ができちゃうんです！
それには「:nth-child(N)」を使います。

例えば上から3番目のli要素を指定したい場合。
li:nth-child(3){}これで要素の指定ができます。
{}の中にいつも通りにCSSを書き込むことで、指定した個数目の要素のみにCSSを適用させることができるんです！

class名を付けても再現できますが、そうなるとHTMLとCSSの2ファイルを編集しなければならないので結構面倒です。
でもこの疑似要素を使えば、CSSだけで操作できるので作業の負担を減らすことができますよ。

数えてn個目の要素指定を繰り返す「:nth-child(Nn)」

3の倍数にのみ繰り返した位置へCSSを適用させたい場面はありませんか？

その時は「li:nth-child(3){}、li:nth-child(6){}、li:nth-child(9){}・・・」となり指定が大変ですよね。
上限がない場合は天文学的な数値まで作成する必要がありそうです・・・

そんな時にはli:nth-child(3n){}で対応できます！！
3nで指定している部分の数字を変えれば何の倍数事にCSSを充てるのかを制御できるので、とても便利です！！
例えば5nにすれば5の倍数、5、10、15、20・・・・の位置に
7nにすれば7の倍数、7、14、21、28・・・・の位置にのみCSSを適用させることができるんです！！

写真の一覧をページに配置する時、写真との間に余白を設けると思います。
この余白、付けるの大変そうではありませんか？
要素の左右どちらかに余白を付けていくと、きちんとそろわなくなってしまいます。

仮に右側へ余白を設けていった場合、余白分が収まりきりませんよね？
なので最後の一つは一段下がってしまう結果になってしまいます。

でもli:nth-child(4n){marign-right:0;}と指定してあげればどうでしょう？
問題になっていた4列目の右側の余白が消えるので、綺麗におさまります。
4nとなっているので2行目の8番目、3行目の12番目も同様に余白を消せるので、綺麗にそろえる事ができるんです！！

まとめ

・「:before」は要素の直前に差し込まれる
・「:after」は要素の直後に差し込まれる
・「:before」「:after」を使う場合は、CSSに「content:””;」が必須
・「:nth-child(N)」で指定した個数目の要素にのみCSSを適用できる（Nは数字を入力）
・「:nth-child(Nn)」で指定した個数の倍数毎にCSSを適用できる（Nは数字を入力）