/
CSSセレクタはスタイルを適用する対象を指定するもの。
疑似クラスは、他のセレクタと組み合わせる事で要素を特定する、幅広く応用の利くセレクタ。
疑似クラスは種類が多いですが、上手く使う事で、読み込みスピード、css設計、メンテナンス性などに役立ちます。
css 疑似クラス
css 疑似クラスとは、セレクタにコロン : で付加してその要素の状態を指定します。
疑似クラスは種類が非常に多いので、主に使用するものを中心に載せています。
基本的なところだけでも理解するとcss設計が楽になりますよ^^
条件に一致した要素を選択する疑似クラス(関数擬似クラス)
関数擬似クラスを使うと、対象(セレクタ)の否定や結合などが可能になり、
今まで個別に記述していたcssをまとめる事ができます。
スッキリとしたcssになるので読み込みスピードもUP。css設計やメンテナンスが楽になります^^
※モダンブラウザは対応済ですが、一部のセレクタはIEや古いバージョンのブラウザで未対応の場合があります。
| 疑似要素 | 引数(パラメータ) | 対象 / 要件 | 説明 / 注意点 | |
|---|---|---|---|---|
| 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) / 奇数番目 | 親要素内で同一の要素を繰り返す場合に １要素 (1行)ごとに背景色を変える場合等に利用 |
関数で指定 (An+B) | li:nth-child(2n-1) / 奇数番目 | 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 | オンになっている要素 | checkedtype="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:設定 などで異なりますので、設定可能なプロパティは割愛しています。