疑似要素セレクタ

1.first-letter 疑似要素（要素の１文字目を指定）

セレクタ::first-letter{ プロパティ: 値;}

サ（←これだけ赤くして大きくする場合）ンプル　サンプル　テキスト

例）
p::first-letter {
	font-size: 2em;
	color: red;
}

2.first-line 疑似要素（要素の1行目を指定）

セレクタ::first-line{ プロパティ: 値;}

サンプル

（↑１行目だけ大きく赤くする場合）
サンプル
サンプル

例）
p::first-line {
	font-size: 2em;
	color: red;
}

3.befor/after 疑似要素（要素の直前・直後にコンテンツの挿入）

セレクタ::befor{ プロパティ: 値;}
セレクタ::after{ プロパティ: 値;}

→実際に挿入する場合はcontentタグで挿入する
　（画像を入れる場合はurl=”ファイルのパス”）

例1）
p::befor{ 
　　content: "◆";
　　padding-right: 5px
　　color: skyblue;
}

p::befor{ 
　　content: "New";
　　padding: 0 5px;
　　margin-left: 10px;
　　font-size: 0.9em;
　　color: white;
　　vertical-align: top;
　　background: red;
　　border-radius: 5px;
}

疑似クラスセレクタ

1.link 疑似クラス（未訪問リンクスタイル）

セレクタ:link { プロパティ名: 値; }

2.visited 擬似クラス（訪問済リンクスタイル）

セレクタ:visited { プロパティ名: 値; }

訪問済みのリンクスタイルを指定する

3.hover 擬似クラス（オンカーソルスタイル）

セレクタ:hover { プロパティ名: 値; }

4.active 擬似クラス（アクティブスタイル）

セレクタ:active { プロパティ名: 値; }

クリックしてから話すまでの間

5.first-child/last-child 擬似クラス（先頭・最終の子要素指定）

セレクタ:first-child { プロパティ名: 値; }
セレクタ:last-child { プロパティ: 値; }

先頭と最終の子要素にスタイルを指定する

<div class="pclass1">親
	<div>　子1～5</div>
</div>

例）
.pclass1 div:first-child {
	color: red;
}
.pclass1 div:last-child {
	color: blue;
}

→子1が赤に、子5が青になる

6.nth-child 擬似クラス（n 番目の子要素指定）

セレクタ:nth-child(n) { プロパティ名: 値; }

ｎ番目の子要素にスタイル指定できる

（整数）	（ｎ）を数字で指定、入力する
odd（奇数）	奇数だけに指定
even（偶数）	偶数だけに指定
（数式）	数式で指定

7.nth-of-type 擬似クラス（同一のセレクタを持つ n 番目の子要素指定）

セレクタ:nth-of-type(n) { プロパティ名: 値; }

同じ親の中にあるうち”同一のセレクタを持つ”子要素に指定

nth-child	例）子要素（子1～5）のうちのどれか
nth-of-type	例）子要素（子1～5）のうち<P>セレクタのうちのどれか

8.not 擬似クラス（指定値以外の要素指定）

セレクタ :not(x) { プロパティ名: 値; }

親要素のうち（ｘ）を含まない要素にのみ指定

例）
<div class="pclass5">親
	<p>　子1</p>
	<p>　子2</p>
	<div>　子3</div>
	<div>　子4</div>
	<div>　子5</div>
</div>

.pclass5 :not(p) {
	color: red;
}

→<p>～</p>タグ内の子1，2以外の要素（子3～5）のみ赤くなる