●疑似要素・疑似クラスの種類と基本的な使い方のサンプル
疑似要素
①疑似要素::before
このテキストの前にくる
②疑似要素::after
このテキストの後ろにくる
②疑似要素::before 画像を差し込む
③疑似要素::first-letter
このように一番最初の文字だけに表示されます。
この場合pタグの一番最初の文字だけに表示されます。
疑似クラス
①疑似クラス:link
②疑似クラス:visited
③疑似クラス:hover
④-1疑似クラス:nth-child(2)
これはh4タグです。
pタグの1番目です。
pタグの2番目です。
pタグの3番目です。
pタグの4番目です。
pタグの5番目です。
④-2疑似クラス:nth-child(2n)
これはh4タグです。
pタグの1番目です。
pタグの2番目です。
pタグの3番目です。
pタグの4番目です。
pタグの5番目です。
④-3疑似クラス:nth-child(even)
これはh4タグです。
pタグの1番目です。
pタグの2番目です。
pタグの3番目です。
pタグの4番目です。
pタグの5番目です。
④-4疑似クラス:nth-child(odd)
これはh4タグです。
pタグの1番目です。
pタグの2番目です。
pタグの3番目です。
pタグの4番目です。
pタグの5番目です。
④-5疑似クラス:first-child
これはh4タグです。
pタグの1番目です。
pタグの2番目です。
pタグの3番目です。
pタグの4番目です。
pタグの5番目です。
④-5疑似クラス:last-child
これはh4タグです。
pタグの1番目です。
pタグの2番目です。
pタグの3番目です。
pタグの4番目です。
pタグの5番目です。
⑤-1疑似クラス:nth-of-type(2)
これはh4タグです。
pタグの1番目です。
pタグの2番目です。
pタグの3番目です。
pタグの4番目です。
pタグの5番目です。
⑤-2疑似クラス:nth-of-type(2n)
これはh4タグです。
pタグの1番目です。
pタグの2番目です。
pタグの3番目です。
pタグの4番目です。
pタグの5番目です。
⑤-3疑似クラス:nth-of-type(even)
これはh4タグです。
pタグの1番目です。
pタグの2番目です。
pタグの3番目です。
pタグの4番目です。
pタグの5番目です。
⑤-4疑似クラス:nth-of-type(odd)
これはh4タグです。
pタグの1番目です。
pタグの2番目です。
pタグの3番目です。
pタグの4番目です。
pタグの5番目です。
⑤-5疑似クラス:first-of-type
これはh4タグです。
pタグの1番目です。
pタグの2番目です。
pタグの3番目です。
pタグの4番目です。
pタグの5番目です。
⑤-5疑似クラス:last-of-type
これはh4タグです。
pタグの1番目です。
pタグの2番目です。
pタグの3番目です。
pタグの4番目です。
pタグの5番目です。