CSSの基本

2022.10.20

【CSS】擬似クラスの一覧と使い方

CSS

CSSには擬似クラスと呼ばれるセレクタに付けられるキーワードがあります。例えばよく使われるのに「:hover擬似クラス」があります。

a:hover{
    text-decoration:underline;
}

このようにCSSに記述するとリンクへマウスカーソルを持っていくとアンダーラインが表示されるようになります。:hoverは擬似クラスだと意識せずに指定している人がいるかも知れませんね。

擬似クラスを使うことで本来JavaScriptなどで制御していたものがCSSのみで対応できるようになるメリットがあるのでぜひ習得しましょう。

なお擬似クラスと似た「::before」がありますが、こちらは擬似要素に分類されます。昔は擬似クラスと同じように「:before」とコロンが１つでも良かったのですが今は間違えないようにコロンが２つになっています。別にコロン１つでも動作はするので昔の記述を修正する必要はありません。

【CSS】擬似要素の使い方と一覧

擬似クラスの一覧

動作が微妙だったりまだ本格的に動かないものは▲を表記しています。

また要素と書いているものはセレクタ名（CLASS名など）およびHTMLタグを指します。

ユーザー操作	概要
:hover	マウスホバー時を指定 ※スマホはタップで反応する
:active	マウスクリックやスマホタップを指定
:focus	選択状態になった要素を指定 ※一般的には`<input>`などで利用する
:focus-visible	`:focus`より柔軟な対応をしてくれる ※`:focus`だとボタンを押した際にCSSが残るが、`:focus-visible`だとボタンを押した後にCSSが消える
:focus-within	子孫要素が:focusされた場合に指定 ※`form:focus-within`を指定すれば、`<form>`内の`<input>`が入力状態になったときに`<form>`のCSSを適用してくれる

位置	概要
:link	訪問したことがないページのリンクを指定
:visited	訪問したことがあるページのリンクを指定
:any-link	`href=""`を持つ要素の`:link`と`:visited`を指定
:target	アンカーリンククリック後の対象を指定
▲:local-link	絶対 URL が対象 URL と同じリンクの場合を指定
▲:target-within	アンカーリンククリック後の対象の子孫を指定
▲:scope	セレクタを指定できる。現状はJavaScriptなどでターゲットを取る。CSSで使うと`<html>`が指定される

ツリー構造
:root	`<html>`を指定カスタムプロパティの登録に利用される
:nth-child()	全ての兄弟要素の○番目の要素を指定 ※()内にワードを入れる ※`odd`は奇数、`even`は偶数、`数字`は指定、`数字n`は倍数（`数字n+数字`とも書ける）、`n+数字`は数字以降、
:nth-last-child()	`:nth-child()`の逆。最後から何番目という指定
:nth-of-type()	`:nth-child()`と同じだが、指定した要素しかカウントしない
:nth-last-of-type()	`:nth-of-type()`の逆。最後から何番目という指定
:first-child	全ての兄弟要素の始めの１つを指定
:last-child	全ての兄弟要素の最後を指定
:first-of-type	`:first-child`と同じだが指定した要素の始めの１つを指定
:last-of-type	`:first-of-type`の逆
:only-child	兄弟要素がない場合に指定
:only-of-type	指定タグの兄弟要素がない場合に指定
▲:empty	中身が空の要素を指定

入力	概要
:enabled	`<input>`などのアクティブ化された要素を指定 ※端的に言えばユーザーが触れられるフォームのパーツ `<input>`へ`disabled="disabled"`を入れてユーザーが触れないようにしている要素は除外される
:disabled	`<input>`などが非アクティブ化された要素を指定 ※`:enabled`の逆
:read-write	`<input>`などでユーザーが編集できる要素 ※`:read-only`の逆
:read-only	`<input>`などでユーザーが編集できない要素 ※フォームの確認ページで`<input>`などを`readonly`を入れてロックしている状態のもの
:placeholder-shown	`<input>`などでプレースホルダーが表示されている要素 ※プレースホルダー：入力欄に参考でmail@example.comなど薄く表示されている文字
:default	グループ内で`selected`や`checked`が始めから入っている要素を指定
:checked	チェックボックスやラジオボタンなどがオンになっている要素を指定 ※`:default`と違うのはオン／オフでCSSが切り替えられる
:indeterminate	`<form>`などで`indeterminate属性`を判断してユーザーがまだ手を付けていない要素を指定
:valid	`<input>`などの入力内容が正しい要素を指定 ※例えば`<input type="email">`にあああと入っていると正しくない
:invalid	`:valid`の逆
:in-range	`<input>`などの値が範囲内である要素を指定 ※例えば日数を入力する欄で31以内の数字が入っていればCSSを当てる
:out-of-range	`:in-range`の逆
:required	`<input>`等に`required`で必須としている要素を指定
:optional	`:required`の逆
▲:autofill	`<input>`で自動補完（オートコンプリート）されたものを指定
▲:blank	`<input>`や`<textarea>`などが未入力状態の要素を指定
▲:user-invalid	`<input>`などで間違った入力である要素を指定 ※Firefoxのみ

言語	概要
:dir	要素に含まれる言語の書字方向を指定 ※日本語は右読み。日本で使う機会はほぼない
:lang	タグに含まれる言語で指定

リソース状態	概要
▲:playing	再生可能なメディアかつ再生中なら指定 ※現状はsafariオンリー
▲:paused	再生可能なメディアかつ一時停止中なら指定 ※現状はsafariオンリー

擬似クラスの使い方

擬似クラスは「:hover{ color:red; }」のようにセレクタを指定しなくても活用できます。また、「:last-child:hover{ color:red; }」のように複数の擬似クラスを繋げることも可能です。

下記に実際に擬似クラスを使った例を置いているので参考にしてください。

:hover

マウスが上に来た要素を指定できます。よく使われるのはリンクのマウスホバー時のアクションです。スマホの場合は:activeと同じような動きになってしまうため注意が必要です。

a:hover{
    text-decoration:underline;
}

See the Pen
:hover by pecoegg (@pecoegg)
on CodePen.dark

:active

要素のマウスクリックやスマホでタップした時のアクションを指定できます。主にリンクやボタンを押した時のCSSを当てますが、開閉式のメニューなどでアニメーションなどの特色をつけることができます。

button:active{
  background:red;
}

See the Pen
:active by pecoegg (@pecoegg)
on CodePen.dark

:focus

選択状態になっている要素を指定できます。よく使われるのが検索入力欄です。<input>でテキスト入力できる状態をわかりやすくしたりできます。

input:focus{
  background:red;
}

See the Pen
:focus by pecoegg (@pecoegg)
on CodePen.dark

:focus-visible

要素によっては:focusより柔軟な対応をしてくれます。例えば<button>に:focusを指定した場合にクリックすると:focusのCSSが押した後も残ります。:focus-visibleであれば<button>を押してもCSSは反映されませんが、キーボード選択やTABキーで選択移動ではCSSが反映されます。<input>は:focusと同じ動きのままです。

.focus:focus{
  background:red;
}

.focus-visible:focus-visible{
  background:red;
}

See the Pen
:focus-visible by pecoegg (@pecoegg)
on CodePen.dark

:focus-within

指定要素のグループ内にある要素が:focus状態になったらCSSを当てられます。よく使われるのは<form>です。お問い合わせフォームなどで入力中なのが視覚的にわかるようになります。

form:focus-within{
  padding:8px;
  background:yellow;
  border:1px solid #000;
}
form:focus-within::before{
  content:"入力中";
}

See the Pen
:focus-within by pecoegg (@pecoegg)
on CodePen.dark

:link

訪問したことがないページのリンクを指定できます。単純にa{color:red;}とすると全ての状態のリンクが赤文字になってしまいますが、:linkを別途指定することで開いたことのないページのリンクのCSSを変更できます。

a{
  color:red;
}

a:link{
  color:blue;
}

See the Pen
:link by pecoegg (@pecoegg)
on CodePen.dark

:visited

すでに訪れたことのあるページのリンクを指定します。

a{
  color:red;
}

a:visited{
  color:black;
}

See the Pen
:visited by pecoegg (@pecoegg)
on CodePen.dark

:any-link

href=””を持つ要素の:linkと:visitedを指定します。例えば<a>にhrefが入っていない場合はCSSが反映されません。

a:any-link{
  background:red;
}

See the Pen
:any-link by pecoegg (@pecoegg)
on CodePen.dark

:target

アンカーリンククリック後のアンカー対象を指定できます。

:target{
  background:red;
}

See the Pen
:target by pecoegg (@pecoegg)
on CodePen.dark

:root

:root擬似クラス自体は<html>を指します。しかしこの擬似クラスを利用することでカスタムプロパティをHTML全体で利用できるようになります。カスタムプロパティとはよく使うメインカラーの値などを使いまわしできるようになります。

以下はカスタムプロパティの使い方例です。:rootの中で--○○と名称すると値を登録できます。CSSを当てる場合はvar(--○○)と書くことで値を使いまわしできます。

:root{
  --main-color : red;
  --main-subColer : green;
  --main-font-size : 20px;
  --main-margin-bottom : 40px;
}

h1{
  color:var(--main-color);
  margin-bottom:var(--main-margin-bottom);
}

span{
  color:var(--main-subColer);
}

See the Pen
:root by pecoegg (@pecoegg)
on CodePen.dark

:nth-child()

グループ内の兄弟要素の○番目の要素を指定できます。○番目と判断するカウントは指定タグ以外のものも含めて数えます。書き方は:nth-child(○○)とカッコ内に値を書きます。

かなり複雑に指定できるようになっています。

:nth-child(odd)	奇数
:nth-child(even)	偶数
:nth-child(数字)	番目を指定
:nth-child(数字n)	同数累加 ※2nなら2,4,6,8となる
:nth-child(A数n+B数)	(A数×0)+B数、(A数×1)+B数、(A数×2)+B数 … ※2n+1なら1,3,5,7,9となうｒ
:nth-child(n+数字)	数字番目以降
:nth-child(-n+数字)	数字番目まで
(n+数字)(-n+数字)	指定範囲 ※:nth-child(n+2):nth-child(-n+5)なら2〜5

li:nth-child(odd){
  color:red;
}
li:nth-child(n+1):nth-child(-n+2){
  color:blue;
}

See the Pen
:nth-child() by pecoegg (@pecoegg)
on CodePen.dark

:nth-last-child()

:nth-child()の逆からカウントします。最後から何番目という指定です。使い方は:nth-child()同じになります。指定方法は上記の:nth-child()を参照してください。

/* 下から奇数を指定 */
li:nth-last-child(odd){
  color:red;
}

See the Pen
:nth-last-child() by pecoegg (@pecoegg)
on CodePen.dark

:nth-of-type()

:nth-child()とほぼ同じです。違うのは指定した要素しかカウントしないということです。指定方法は上記の:nth-child()を参照してください。

/* 奇数を指定 */
p:nth-of-type(odd){
  color:red;
}

See the Pen
:nth-of-type() by pecoegg (@pecoegg)
on CodePen.dark

:nth-last-of-type()

:nth-of-type()の逆からカウントします。最後から何番目という指定です。使い方は:nth-child()同じになります。指定方法は上記の:nth-child()を参照してください。

/* 奇数を指定 */
p:nth-last-of-type(odd){
  color:red;
}

See the Pen
:nth-last-of-type() by pecoegg (@pecoegg)
on CodePen.dark

:first-child

兄弟要素の全て含めたグループの始めの１つを指定できます。<div>や<p>が混在していてもカウントされます。パンくずリストや記事一覧の先頭だけ特色を付けたりなど使い勝手の良い疑似クラスです。

違うHTMLタグが混在しているグループ内で特定のHTMLタグの先頭を選びたいといったことはできません。これは兄弟要素全てがカウントされているからです。HTMLタグが混在している場合は「:first-of-type」を利用します。

.row :first-child{
  background:red;
}

/* 
  タグが混在しているのに要素を指定しても
  CSSを反映できない
*/
.row2 p:first-child{
  background:red;
}

See the Pen
:first-child by pecoegg (@pecoegg)
on CodePen.dark

:last-child

:first-childの逆です。兄弟要素の全て含めたグループの一番最後を指定できます。<div>や<p>が混在していてもカウントされます。パンくずリストの一番最後の＞マークを消したりなど繰り返すCSSを消したりするのに重宝します。

.row :last-child{
  background:red;
}

See the Pen
:last-child by pecoegg (@pecoegg)
on CodePen.dark

:first-of-type

兄弟要素の始めの１つを指定できます。:first-childと違うはカウントされるタグを指定できることです。

例えば<div>と<p>が兄弟要素の場合は「:first-of-type{CSS}」と書けば<div>と<p>それぞれの先頭へCSSをが当てられます。「p:first-of-type{CSS}」と書けば<p>の先頭だけCSSが当てられます。

/* 
  各要素の先頭のタグにCSSを反映できる
*/
.row :first-of-type{
  background:red;
}

/* 
  pの先頭だけCSSを当てたい場合
*/
.row2 p:first-of-type{
  background:red;
}

See the Pen
:first-of-type by pecoegg (@pecoegg)
on CodePen.dark

:last-of-type

兄弟要素の最後の要素を指定できます。:first-of-typeの逆です。使い方は:first-of-typeと同じです。

/* 
  各要素の最後のタグにCSSを反映できる
*/
.row :last-of-type{
  background:red;
}

/* 
  最後のpだけCSSを当てたい場合
*/
.row2 p:last-of-type{
  background:red;
}

See the Pen
:last-of-type by pecoegg (@pecoegg)
on CodePen.dark

:only-child

要素に兄弟要素が無い場合に指定できます。

.row :only-child{
  background:red;
}

See the Pen
:only-child by pecoegg (@pecoegg)
on CodePen.dark

:only-of-type

要素に指定の兄弟要素が無い場合に指定できます。

.row p:only-of-type{
  background:red;
}

See the Pen
:only-of-type by pecoegg (@pecoegg)
on CodePen.dark

:enabled

<input>などのアクティブ化された要素を指定できます。アクティブ化とはユーザーがテキストを記入したりチェックを入れたりできる<form>に含まれる要素のことです。例えば<input disabled="disabled">とすればシステム側で注入したINPUT情報をフォームで送ることができますが、特別にCLASS名などを付けなくてもこの:enabledで特色を分けることができます。

form :enabled{
  border:2px solid green;
  background:yellow;
}

See the Pen
:autofill by pecoegg (@pecoegg)
on CodePen.dark

:disabled

<input>などの非アクティブ化された要素を指定できます。:enabledの逆になります。

form :disabled{
  opacity:.3;
}

See the Pen
:disabled by pecoegg (@pecoegg)
on CodePen.dark

:read-write

<input>などでユーザーが編集できる要素を指定できます。:enabledと違うのはフォームパーツ以外のあらゆる要素へ効果があるということです。ただし普通のHTMLタグはユーザーがテキスト入力をできないので指定されません。

.form01 :read-write{
  padding:8px;
  background:green;
}

.form02 div :read-write{
  padding:8px;
  background:green;
}

See the Pen
:read-write by pecoegg (@pecoegg)
on CodePen.dark

:read-only

<input>などでユーザーが編集できない要素を指定できます。:disabledと違うのはフォームパーツ以外のあらゆる要素へ効果があるということです。<input>などのフォームパーツにreadonlyを設定します。

.form01 :read-only{
  padding:8px;
  background:red;
}

.form02 div :read-only{
  padding:8px;
  background:red;
}

See the Pen
:read-only by pecoegg (@pecoegg)
on CodePen.dark

:placeholder-shown

<input>などでプレースホルダーを表示している状態の要素を指定できます。プレースホルダーとは入力欄に始めから薄文字で書かれているサンプル表示のものです。<input placeholder="テキスト">のように記述します。<input>へ何か文字を入力したりvalueに値を入れているとプレースホルダーは解除されます。

:placeholder-shown{
  border:2px solid green;
}

See the Pen
:placeholder-shown by pecoegg (@pecoegg)
on CodePen.dark

:default

selectedやcheckedが始めから入っている要素を指定できます。

:default + label {
  color:green;
}

:default + label::before {
  content:'(初期値)';
}

See the Pen
:default by pecoegg (@pecoegg)
on CodePen.dark

:checked

今現在チェックボックスやラジオボタンなどで選択されている要素を指定できます。

:checked + label {
  color:green;
}

See the Pen
:default by pecoegg (@pecoegg)
on CodePen.dark

:indeterminate

<form>でチェックボックスやラジオボタンなどindeterminate属性を判断してユーザーがまだ手を付けていない要素を指定できます。HTMLタグにindeterminate属性は設定できないのでJavaScriptで制御する必要があります。

:indeterminate + label{
  background:red;
}

See the Pen
:indeterminate by pecoegg (@pecoegg)
on CodePen.dark

:valid

<input>などの入力内容が正しい要素を指定できます。<input>にrequiredを入れて必須項目にすると<input type="text">でも正しく動作します。

:valid{
  background:green;
}

See the Pen
:valid by pecoegg (@pecoegg)
on CodePen.dark

:invalid

<input>などの入力内容が正しくない要素を指定できます。:validの逆になります。:validと:invalidをあわせて使うことでフォームの入力ミスの低下を防ぐ措置が可能です。

:invalid{
  background:red;
}

See the Pen
:invalid by pecoegg (@pecoegg)
on CodePen.dark

:in-range

<input>などの値が範囲内である要素を指定できます。日付や年齢などの入力欄でありえない数値の範囲を設定しておけばありえない数字の入力ミスを防げたりします。

:in-range{
  background:green;
}

See the Pen
:in-range by pecoegg (@pecoegg)
on CodePen.dark

:out-of-range

<input>などの値が範囲外である要素を指定できます。:in-rangeの逆になります。:in-rangeと:out-of-rangeを合わせて使うことでユーザーの入力ミスを防ぎやすくなります。

:out-of-range{
  background:red;
}

See the Pen
:out-of-range by pecoegg (@pecoegg)
on CodePen.dark

:required

<input>等にrequiredで必須としている要素を指定できます。必須の設定は<input required>のように記述します。

:required{
  border:2px solid red;
}

See the Pen
:required by pecoegg (@pecoegg)
on CodePen.dark

:optional

<input>等で必須ではない要素を指定できます。

:optional{
  border:2px solid green;
}