前回の記事【初心者向け】CSSセレクタとは?セレクタの種類や指定方法を解説!(基礎編)ではCSSセレクタの基本的な知識と指定方法をご紹介しました。 今回は、よりコーディングの幅が広がる「擬似要素」と「擬似クラス」に関して解説していきます。 擬似要素とは ~擬似要素の適用例~ 擬似要素とは、要素の一部に対してスタイルを適用できる指定方法です。 HTMLの要素を擬似的にCSSで設定するので、コーディングに手を加えることなく装飾を適用することができます。 例として、下図のように見出しの先頭一文字のみ文字の色を変える装飾を実装してみましょう。 擬似要素を使わない場合 擬似要素を使わずにこれを表現すると、HTMLとCSSの記述は下記のようになります。 見出し要素のh2の一文字目のみをspanタグで囲い、スタイルを適用しています。 この方法でも装飾は可能ですが、テキストをspanタグで無理やり区切って
![【初心者向け】CSSの擬似要素と擬似クラスを理解しよう! | ビジネスとIT活用に役立つ情報(株式会社アーティス)](https://cdn-ak-scissors.b.st-hatena.com/image/square/c41531946d6f50115b2d2ca37f2c4fac931066af/height=288;version=1;width=512/https%3A%2F%2Fwww.asobou.co.jp%2Fblog%2Fwp-content%2Fuploads%2F2019%2F08%2Fa11b4bb3ba448d1fa402ac3dc62cc91f.jpg)