CSSだけでさまざまな事ができる！疑似要素・疑似クラスをおさらい
今回はCSSで指定できる疑似要素や疑似クラスについておさらいしていこうと思います！
疑似要素、擬似クラスとは選択された要素が特定の状態である場合にそのコンテンツにCSSスタイルを適用するものです。
今回はその中から、特によく使用するものや知っていると便利なものを紹介していきたいと思います！
E:before
要素の一番最初にインライン要素を生成する。
- 使用例
E:after
要素の一番最後にインライン要素を生成する。
- 使用例
E:first-child()
親要素からみて最初の要素であった場合、スタイルを適用する
- 使用例
E:last-child()
親要素からみて最後の要素であった場合、スタイルを適用する
- 使用例
E:nth-child()
親要素からみて括弧内の数字番目の要素であった場合、スタイルを適用する
- 使用例
E:nth-last-child()
親要素の後ろから数えて括弧内の数字番目の要素であった場合、スタイルを適用する
- 使用例
E + F
Eの直後にあるFにスタイルを適用する。
- 使用例
E:first-letter
要素の最初の一文字目のみスタイルを適用する
- 使用例
E ~ F
E要素以降にある同じ階層のF要素にスタイルを適用する
- 使用例
まとめ
今回紹介したのはほんの一部です。他にも様々な疑似要素や疑似クラスがあります！
ちなみに擬似クラスはw3schoolsのCSS Pseudo-classesページ、擬似要素はCSS Pseudo-elementsページ等で確認することができます！
覚えておくと非常に便利なものが多いので、ぜひ一読してみてください！
2018.07.03
