Mill's Note

【CSS-rules】疑似クラス一覧

/

CSSセレクタはスタイルを適用する対象を指定するもの。
疑似クラスは、他のセレクタと組み合わせる事で要素を特定する、幅広く応用の利くセレクタ。

疑似クラスは種類が多いですが、上手く使う事で、読み込みスピード、css設計、メンテナンス性などに役立ちます。

css 疑似クラス

css 疑似クラスとは、セレクタにコロン : で付加してその要素の状態を指定します。
疑似クラスは種類が非常に多いので、主に使用するものを中心に載せています。

基本的なところだけでも理解するとcss設計が楽になりますよ^^

条件に一致した要素を選択する疑似クラス(関数擬似クラス)

関数擬似クラスを使うと、対象(セレクタ)の否定や結合などが可能になり、
今まで個別に記述していたcssをまとめる事ができます。

スッキリとしたcssになるので読み込みスピードもUP。css設計やメンテナンスが楽になります^^

疑似要素引数(パラメータ)対象 / 要件説明 / 注意点
1:is()セレクタのリスト指定セレクタのどれかに一致する要素:is() やセレクタを複数組み合わせる
事で条件を設定する
2:where()セレクタのリスト指定セレクタのどれかに一致する要素:is()と同じ働きだが、指定の優先度が低い為
オーバーライド前提の場合などはこちらを利用
3:not()セレクタのリスト
又は:not() 並列
指定セレクタ(全て有効セレクタ必須)指定セレクタに無効セレクタが含まれる場合、
:not()での指定が全て無効となる
4:has()結合子 + セレクタ指定セレクタで親や兄要素を指定親要素 :has(> セレクタ)
— 指定セレクタの親要素を選択
兄要素 :has(+ セレクタ)
— 指定セレクタ直前の兄要素を選択
5:targetなし

要素の位置に関する疑似クラス (ツリー構造擬似クラス)

数値の指定方法

位置に関する疑似クラスには、何番目かを指定する方法がいくつかありますので、先にご紹介します

指定方法記述方法説明
何番目かを数値で指定li:nth-child(2)2個目のli
奇数偶数を文字で指定li:nth-child(odd)  / 奇数番目
li:nth-child(even) / 偶数番目
親要素内で同一の要素を繰り返す場合に
1要素 (1行)ごとに背景色を変える場合等に利用
関数で指定 (An+B)li:nth-child(2n-1) / 奇数番目
li:nth-child(2n)   / 偶数番目
li:nth-child(4n+1) / 5,10,15…番目
A = 刻み値 ( A=3 なら 3,6,9… ) 必須
B = 加算(減算)値 / 未記入可
n A の後ろにある記号と考えればOK 必須

位置に関する疑似クラス

疑似要素対象 / 要件説明 / 注意点
:root文書のルートである要素HTML では通常 <html> 要素を指す
:empty空要素HTMLタグだけ中身が全くない要素
:targetリンク先となる idを持つ要素id要素にリンクした際、
このid要素に cssが反映される
:first-child兄弟要素の最初親要素の中で一番最初でなければ取得されない
:last-child兄弟要素の最後親要素の中で一番最後でなければ取得されない
:first-of-type兄弟要素の同じ要素の中で最初親要素の中で上に他のセレクタがあっても
指定したセレクタのみを取得
:last-of-type兄弟要素の同じ要素の中で最後親要素の中で下に他のセレクタがあっても
指定したセレクタのみを取得
:nth-child(指定)兄弟要素の中で上から数えた位置を指定指定:「数値の指定方」のいづれか
:nth-last-child(指定)兄弟要素の中で下から数えた位置を指定指定:「数値の指定方」のいづれか
:nth-of-type(指定)兄弟要素の同じ要素の中で上から数えた位置を指定指定:「数値の指定方」のいづれか
指定したセレクタのみを数える
:nth-last-of-type(指定)兄弟要素の同じ要素の中で下から数えた位置を指定指定:「数値の指定方」のいづれか
指定したセレクタのみを数える
主な擬似クラスのみ掲載

form関係 (入力擬似クラス)

疑似要素対象 / 要件説明 / 注意点
:enabledアクティブ化 (選択、クリック、入力等)や
フォーカスが可能な要素
form以外にも適用
readonly, pointer-event: none;
が設定されていない場合
:disabledアクティブ化 (選択、クリック、入力等)や
フォーカスが不可能な要素
form以外にも適用
readonly, pointer-event: none;
が設定されている場合
:read-onlyユーザーが編集できない要素form以外にも適用
一括での指定はしない方が無難
readonly 属性セレクタでの設定推奨
:read-writeユーザーが編集できる要素type="text", <textarea>
:focusフォーカスを持つ要素を
ユーザー選択している状態
フォーカスを持つ要素のみ
<input>, <select>, <textarea> 等
:focus-withinフォーカスを持つ要素を選択している
場合、指定要素全体
子孫にフォーカスを持つ要素
<form>, <label> 等
:required必須項目の要素required 指定
<input><select><textarea>
:optional必須項目ではない要素required が指定されていない
<input><select><textarea>
:checkedオンになっている要素checked
type="radio", type="checkbox"
:blank未入力、又は、空文字の要素type="text", <textarea>
:placeholder-shownプレースホルダーが設定されている要素type="text", <textarea>
:valid入力内容が規定に沿う要素type="email" 等、規定フォーマットのあるもの
:invalid入力内容が規定に沿わない要素type="email" 等、規定フォーマットのあるもの
:in-range選択した値が許容範囲内の場合type="range" 等のスライダーコントロール
:out-of-range選択した値が許容範囲外の場合type="range" 等のスライダーコントロール
:user-invalidユーザーの操作の後(submit送信等)、
無効と判断されたフォーム要素
 修正完了まで
:invalid:out-of-range:required に一致
主な入力擬似クラスのみ掲載

入力擬似クラスの指定で、基本的にインラインレベルと同様の装飾 ( font, text, background 等)が可能となりますが、display:設定 などで異なりますので、設定可能なプロパティは割愛しています。

参考サイト