# ～擬似表記について～

#### 擬似要素とは、要素の一部に対してスタイルを適用できる指定方法です。
例えば、「サンプル」の「サ」だけを赤くしたい
既存の方法で従ってコーディングすると、、
<h2 class="first">
<span>サ</span>ンプル
</h2>
<style>h2.first span{color:red;}</style>

擬似要素を使うと、、
<h2 class="second">
サンプル
</h2>
<style>h2.second::first-letter{color:blue;}</style>

と簡単にできる！！　　（コードを参照）

## ・主要な疑似要素
#### 1. A:: first-letter（要素の一文字目を指定）
Aにはクラス名が入る
実装↓↓
<h2 class="second">
サンプル
</h2>
<style>h2.second::first-letter{color:bule;}</style>

#### ２．A:: first-line（要素の一行目を指定）
要素の一行目にスタイルを適用する
実装↓↓
<h2 class="third">
サンプル<br>
サンプル
</h2>
<style>h2.third::first-line{color:green;}</style>

#### ３．A::before（要素の直前にコンテンツを追加）
beforeを指定すると、要素の直前にコンテンツを追加する
実装↓↓
<h2 class="forth">
サンプル
</h2>
<style>h2.forth::before
{content:"要素の追加をしたよ";
color:red;}
</style>

となる
contentで文字を追加。

#### ４．A::after（要素の直後にコンテンツを追加）
afterを指定すると、要素の直後にコンテンツを追加する
実装↓↓
<h2 class="fifth">
サンプル
</h2>
<style>h2.fifth::after
{content:"要素の追加をしたよ";
color:red;
}
</style>

## ・擬似クラスとは
擬似クラスとは指定の要素が特定の状態である場合にスタイルを適用させるセレクタのこと

#### 1.　hover時
実装↓↓
<a class="one" href=#>リンクがあるよ</a>
<style>a.one:hover{color:red;}</style>

コロンが一つであることに注意

#### 2．A:active（要素がアクティブ状態になった際の指定）
aタグではマウスを左クリックしてから離すまでがアクティブ状態となる
実装↓↓
<a class="second" href=#>リンクがあるよ</a>
<style>a.second:active{color:green;}</style>

クリックするとわかる