擬似要素とは

擬似要素とは，要素の一部に対してスタイルを適用できる指定方法である．擬似要素を利用することで，HTMLを変更することなく，要素内の特定の部分にスタイルを適用させることができる．

擬似要素の基本構文

セレクタ:擬似要素{
    property: value;
}

セレクタと擬似要素を，コロン：を2つで繋ぎ，適用したいプロパティを記述することで利用することができる．

先ほど述べたように，擬似要素を使うことでHTMLを変更することなく特定の部分にCSSを適用させることができる．以下の２つのコードはどちらも同じ結果を出力する．擬似要素を利用することで，HTMLの簡略化ができていることがわかる．

◯擬似要素を利用しない場合

<!-- html -->
<p><span>最</span>初の文字だけ赤色です．</p>
<!-- css -->
<style>
    span{ color: red;}
</style>

◯擬似要素を利用した場合

<!-- html -->
<p>最初の文字だけ赤色です．</p>
<!-- css -->
<style>
    p::first-letter{ color: red;}
</style>

↓結果

ここでは，代表的な擬似要素を挙げる．他のもたくさんある．

	機能
::after	選択した要素の直後にスタイルを適用した要素を付け加える
::before	選択した要素の直前にスタイルを適用した要素を付け加える
::first-letter	要素の一番最初の文字に対してスタイルを適用する
::first-line	要素の最初の行に対してスタイルを適用する

::afterと::beforeはどちらも新たに付け加える内容を書く必要があるため，content: ;というプロパティが必ず必要となる．

擬似クラスとは，選択された要素に対して，特定の状態である場合にスタイルを適用できる指定方法である．ユーザの動きに対してもデザインを変化させることができ，擬似要素と同様に，HTMLに一切変更を加える必要がないというメリットがある．

セレクタ:擬似クラス{
    property: value;
}

擬似要素と異なり，セレクタと擬似クラスをコロン：を１つで繋ぎ，適用したいプロパティを記述することで利用することができる．

１．:hover
:hoverはマウスカーソルが要素の上に乗った時にスタイルを適用する．

element:hover{
    property: value;
}

２．a:link(a:visited)
aタグに対して，そのリンクが未訪問の状態である場合にスタイルを適用する．逆に訪問済みの状態を指定する場合はvisitedにすることでスタイルを適用できる．

a:link{ property: value;}
a:visited{ property: value;}

３．:nth-chile(n)
親要素内のn番目の要素に対して，スタイルを適用させることができる．

element:nth-chile(n){ 
    property: value;
}

他にも，文書の言語や時間によってスタイルを変える擬似クラスもある．必要に応じて調べるのが良い．