【CSS】疑似クラス一覧

      2016/08/15

後で見返せるように、疑似クラスについて、まとめてみました。

疑似クラスについて

特定の条件に合致するときにのみ、スタイルを適用させたい場合に使用する。
セレクタの末尾に、以下の疑似クラスを付加する形で記述する。

例えば、画像の上にマウスカーソルがホバーしている間だけスタイルを適用させたいなら
img:hoverのように指定する。
訪問済みのリンクを表す場合なら、a:visited疑似クラスが該当する。

擬似クラス一覧

説明
:active 指定している状態
:checked チェックされた状態(ラジオボタンやチェックボックス)
:disabled 無効状態
:empty 子要素を持たない
:enabled 有効状態
:first-child 最初の子要素
:first-of-type 兄弟関係にある最初の要素
:focus フォーカスを合わせている状態
:hover マウスカーソルがホバーしている状態
:lang 記述言語が指定したものである場合
:last-child 最後の子要素
:last-of-type 兄弟関係にある最後の要素
:link 未訪問のリンク先へのアンカー
:not(s) sを満たさない
:nth-child(n) n番目の子要素
:nth-last-child(n) 後からn番目の子要素
:nth-last-of-type(n) 後からn番目にある要素
:nth-of-type() n番目にある要素
:only-child 唯一の子要素
:only-of-type 子要素の中で唯一の要素
:root 文章内のルート要素
:target URIの#アンカー名と一致する
:visited 訪問済のリンク先へのアンカー

【使用例】:focus疑似クラスを使用して、フォーカスがある入力欄のみ背景色を変える

(CSS)
			input:focus{
				background-color: yellow;
			}
			
(HTML)
			<div class="wrap">
				<input type="text">
				<input type="text">
			</div>
			
(実行結果)フォーカスがある入力欄のみ背景色が変わります

【使用例】:hover疑似クラスを使用して、ホバー中のみ画像を少し拡大する

(CSS)
			.wrap img{
				width: 80px;
				height: 80px;
			}
			.wrap img:hover{
				transform: scale(1.2,1.2);
			}	
			
(HTML)
			<div class="wrap">
				<img src="img_sample1.png">
			</div>
			
(実行結果)ホバーすると拡大します
サンプル似顔絵女性1

【使用例】
:first-child疑似クラスを使用して、最初のimg要素を赤枠で囲む。
:last-child疑似クラスを使用して、最後のimg要素を青枠で囲む。

(CSS)
			.wrap img{
				width: 80px;
				height: 80px;
			}
			.wrap img:first-child{
				border: 5px solid red;
			}
			.wrap img:last-child{
				border: 5px solid blue;
			}
			
(HTML)
			<div class="wrap">
				<img src="img_sample1.png">
				<img src="img_sample2.png">
				<img src="img_sample_man1.png">
				<img src="img_sample_man2.png">
			</div>
			
(実行結果)
サンプル似顔絵女性1
サンプル似顔絵女性2
サンプル似顔絵男性1
サンプル似顔絵男性2

【使用例】:not()疑似クラスを使って、title属性が無い画像を赤枠で囲む

(CSS)
				.wrap img{
					width: 80px;
					height: 80px;
				}
				.wrap img:not([title]){
					border: 5px solid red;
				}
			
(HTML)
			<div class="wrap">
				<img src="img_sample1.png" title="女性画像">
				<img src="img_sample2.png">
				<img src="img_sample_man1.png">
				<img src="img_sample_man2.png">
			</div>
			
(実行結果)
サンプル似顔絵女性1
サンプル似顔絵女性2
サンプル似顔絵男性1
サンプル似顔絵男性2

属性セレクタについては、こちらを参照してください。

まとめ

疑似クラスについて、いくつかピックアップしてサンプルを作成してみました。
私は、:hover疑似クラスを一番よく使っていますが、他にも使えそうなクラスがあるのだと、あらためて勉強になりました。

 - css ,