CSS~擬似要素と擬似クラス~

今回はCSSで使用する、疑似要素について学習していきます。

疑似要素とは

指定している要素の特定の部分にスタイル付けすることができます。

index.html

<h1><span>あ</span>いうえお</h1>

style.css

h1 {
 color: red;
}

span {
 color: blue;
}

疑似クラス

HTMLをいじることなく要素を作ることができます！

index.html

<h1>あいうえお</h1>

style.css

h1::before {
 content: 'いぇあ！いぇあ！';
}

あいうえおの直前にいぇあ！が出ます。
疑似クラスには他にも、active,hover,checkedなどがあります。

疑似クラスを使うメリット

①HTMLの文章構造を変えることなく見かけ上の要素を追加することができる
②あとから追加することができる。
③コピペされたくないとき（？）
となります。

具体的な使い方は次の記事で触れていきたいと思います！！