疑似クラス
疑似クラスは、その要素の状態に基づいてスタイルを付与することができるものです。
CSSで記述する際は、:hoverのように、コロンを1つつけます。
ユーザ操作
| 名前 | 概要 |
|---|---|
| :active | アクティブ化された要素(aやbutton)を指定します。一般的にクリックボタンを押下したときにアクティブ状態となります。 リンク関連の疑似クラスである:link、:hover、:visitedによって上書きされるため、:link→:visited→:hover→:activeの順(LVHA順)で記述するのが良いでしょう。 |
| :focus | フォーカスが出来る要素をクリックまたはTabキーで選択したときに一致します。 ※フォーカスを持つ要素を含む要素を選択したい場合は、:focus-withinを使います |
| :focus-visible | 要素が:focusの条件に一致しているとき、UAがフォーカスしていることを明示するべきと判断された場合に適用されます。 マウスでクリックしたときはいらないけど、キーボードのTabキーで選択したときはフォーカス表示してほしいときなどに使います。 |
| :focus-within | その要素または子孫要素にフォーカスを持つ場合に一致します。 |
| :hover | カーソルを要素の上にかざしたときに一致します。 ※タッチデバイスでの使用はしばしば問題になるため考慮が必要です。 |
ツリー構造
| 名前 | 概要 |
|---|---|
| :first-child | 兄弟要素の中で一番最初の要素と一致します。 |
| :last-child | 兄弟要素の中で一番最後の要素と一致します。 |
| :only-child | 兄弟要素がない要素と一致します。 |
| :nth-child() | 兄弟要素の中で指定した位置と一致します。 |
| :nth-last-child() | 兄弟要素の中で指定した位置と一致します。 後ろから前にカウントしていきます。 |
| :nth-of-type() | 兄弟要素の指定した要素の中で指定した位置と一致します。 |
| :nth-last-of-type() | 兄弟要素の指定した要素の中で指定した位置と一致します。 後ろから前にカウントしていきます。 |
| :first-of-type | 兄弟要素の指定した要素の最初の要素と一致します。 |
| :last-of-type | 兄弟要素の指定した要素の最後の要素と一致します。 |
| :only-of-type | 同じタグの兄弟要素がない要素と一致します。 |
| :defined | 定義されているすべての要素と一致します。 |
| :empty | 要素ノードや文字列などの子を持たない要素と一致します。 |
| :host | Shadow DOMのルートホスト要素と一致します。 ※ Shadow DOM: Light DOMから独立したツリー構造 |
| :host() | Shadow DOMのルートホストのうち、セレクタの引数と一致するものを選択します。 |
| :is() | ※ :matches()から:is()に変わりました 引数にセレクタリストを取り、リスト中のいずれかに当てはまる要素と一致します。 |
| :where() | 引数にセレクタリストを取り、リスト中のいずれかに当てはまる要素と一致します。 |
| :not() | 引数に指定されたセレクタに一致しない要素を選択します。 |
| :root | ツリーのルート要素を選択します。 HTMLでは<html>要素を表しますが、htmlセレクタより詳細度が高くなります。 |
:is()と:where()の違い
:is()は引数内で最も詳細度の高いセレクタの詳細度になるのに対し、:where()は詳細度が常に0になります。
:not()の注意点
使用する際いくつか注意点があります。
- 入れ子にはできない
- ルールの詳細度を上げることができる
- foo:not(#bar)は#fooの詳細度より高くなる
- :not(.foo)は「.fooではない要素」のため、
<html>や<body>を含む - 祖先要素を除外できない
- 複数セレクタを指定する書き方はブラウザが未対応の場合がある
- :not(.foo):not(.bar)と書く
フォーム
| 名前 | 概要 |
|---|---|
| :autofill | <input>要素がブラウザによって自動補完されたときに一致します。 そのフィールドをユーザが編集すると一致しなくなります。 ※多くのブラウザで:-webkit-autofillでbackground-color、background-image、colorに対して!importantでスタイルを定義しているため、CSSでは独自でスタイルが上書きできません。 |
| :checked | ラジオボタン、チェックボックス、オプションボタン要素が選択された状態と一致します。 |
| :default | 以下に一致します。 ・フォームのデフォルトボタンである送信ボタン<button> ・<input type=”checkbox”> ・<input type=”radio”> ・elected属性を持つ<option> |
| :enabled | アクティブ化したりフォーカスができる要素と一致します。 例えば、disabled属性が与えられたinput要素には一致しません。 |
| :disabled | :enabledの逆です。 |
| :indeterminate | 未確定状態にあるフォーム要素と一致します。 ・radio要素で、同じnameの値を持つ全てのラジオボタンが未選択状態のとき ・checkbox要素で、JavaScriptでindeterminateがtrueに設定されているとき ・<progress>要素で、途中のとき |
| :in-range | <input>要素で入力値がminとmax属性による範囲内にあるものに一致します。 |
| :out-of-range | <input>要素で入力値がminとmax属性による範囲外にあるものに一致します。 |
| :optional | required属性が設定されていない<input>、<select>、<textarea>要素と一致します。 |
| :placeholder-shown | プレースホルダが表示されている<input>、<textarea>要素と一致します。 |
| :read-only | 読み取り専用readonlyが指定されている要素と一致します。 |
| :read-write | ユーザが編集可能な要素と一致します。 |
| :required | <input>、<select>、<textarea>要素でrequired属性が与えられているものと一致します。 |
| :valid | バリデーションが成功したフォーム要素と一致します。 |
| :invalid | バリデーションが失敗したフォーム要素と一致します。 |
リンク関連
| 名前 | 概要 |
|---|---|
| :any-link | href属性を持つ全ての<a>、<area>と一致します。 |
| :link | href属性を持つ<a>、<area>のうち、未訪問の要素と一致します。 |
| :visited | href属性を持つ<a>、<area>のうち、訪問済みの要素と一致します。 |
| :target | URLの#で記述するフラグメントに一致するidを持つ要素と一致します。 |
:visitedについて
プライバシー上の理由から、適用できるスタイルに制約があります。
- 利用できるCSSプロパティは以下の通り。
- color
- background-color
- border-color(ショートハンドではないものも含む)
- column-rule-color
- text-decoration-color
- text-emphasis-color
- 利用できるSVG属性はfillとstroke
- 利用できるスタイルでもアルファチャンネルは無視される
- 要素は:visitedに一致することはない
- window.getComputedStyleメソッド（※）は:visited状態ではない色の値を返す
※ アクティブなスタイルシートに含まれるすべてのCSSプロパティの値を含むオブジェクトを返すメソッド
テキスト関連
| 名前 | 概要 |
|---|---|
| :lang() | 指定された言語に一致する要素を選択します。 つまり、言語別にスタイルを適用することが出来ます。 |
画面の状態
| 名前 | 概要 |
|---|---|
| :fullscreen | 全画面モードの要素に一致します。複数あればすべて選択します。 |
| :picture-in-picture | ピクチャインピクチャモードの要素に一致します。 |
印刷
すべて@pageアットルールで使用されます。
| 名前 | 概要 |
|---|---|
| :first | 印刷文書の最初のページと一致します。 文書のマージン、改ページするとき前ページに印刷する最低行数を設定するorphans、改ページするとき次ページに印刷する最低行数を設定するwindows、ページ区切りを変更することが出来ます。 また、マージンはpxやinなどの絶対的な長さの単位のみ使用できます。 |
| :left | 印刷文書の左側のページと一致します。 ページのmargin、padding、border、backgroundの各プロパティを変更することができます。 |
| :right | 印刷文書の右側のページと一致します。 |
疑似要素
疑似要素は、その要素の特定の部分に対してスタイルを付与することができるものです。
CSSで記述する際は、::beforeのように、コロンを2つつけます。
※ 疑似クラスと疑似要素を見分けやすくするために、CSS3でコロン2つの表記法::afterが導入されましたが、CSS2の:afterも使用することが出来ます。
| 名前 | 概要 |
|---|---|
| ::after | 選択した要素の子要素の最後に疑似要素を生成します。 <img>、<br>などの置換要素（※）には適用されません。 contentプロパティを用いて、要素の装飾によく使われます。 また、contentは空にして、backgroundに画像を設定したりして装飾することも多いです。 ※ 文書スタイルに影響されない要素。要素ボックス内のコンテンツ位置を設定できるプロパティのみが影響を与えることができる |
| ::before | 選択した要素の子要素の最初に疑似要素を生成します。 その他::afterと同様です。 |
| ::backdrop | 何らかの要素が全画面モードで表示されたときにそのすぐ下のレイヤーに表示されるViewportサイズのボックス要素です。 これはFullscreen APIを使用して全画面モードで配置される要素やおよび<dialog>（MDN Web Docs参照）要素を表示するときに用いられます。 全画面モードで複数の要素が配置されたときは、::backdropは最上位要素のすぐ下に描画されます。 ::backdropはどの要素にも継承せず、どの要素からも継承せず、プロパティの制限もありません。 |
| ::cue | 選択された要素内のWebVTTキューを指定します。VTTトラック付きのメディアで、キャプションなどをスタイル付けすることができます。 |
| ::first-letter | ブロックレベル要素の最初の行の一番最初の文字を指定します。ただし、最初の文字より前に他のコンテンツがない場合に限ります。 単純に要素の最初の文字を識別できるとは限らないため注意が必要です。 例えば、::beforeとcontentプロパティで、要素の先頭にテキストが挿入された場合、この挿入されたコンテンツの最初の文字に一致します。 |
| ::first-line | ブロックレベル要素の最初の行を指定します。 なお、選択できる最初の行の長さは、要素・文書の幅、文字列のフォントの大きさなど、様々な要因に左右されます。 |
| ::file-selector-button | type=”file”のinput要素を指定します。 「ファイルを選択」のようなボタンにスタイルを適用することができます。 古いWebKit/Blink互換のブラウザは-webkit prefixが必要です。（::-webkit-file-upload-button） |
| ::marker | ::marker は CSS の擬似要素で、リスト項目の箇条書き記号ボックス（ふつうは黒丸や番号が入ったもの）を選択します。これは display: list-item が設定された要素や擬似要素、例えば <li> 要素や <summary> 要素で利用できます。 利用可能なプロパティ ・すべてのフォントプロパティ ・white-space ・color ・text-combine-upright,unicode-bidi, direction の各プロパティ ・content ・すべてのアニメーションおよびトランジションプロパティ |
| ::placeholder | ::placeholder は CSS の擬似要素で、<input> または <textarea> 要素のプレイスホルダー文字列を表します。 セレクターに ::placeholder を使ったルールを使用できるのは、::first-line 擬似要素に適用できる CSS プロパティだけです。 |
| ::selection | ユーザーがテキストをマウスでクリックやドラッグすることで選択した文書の一部にスタイルを適用します。 利用可能なプロパティ ・color ・background-color ・text-decoration ・text-shadow ・SVG関連 (stroke-color, fill-color, stroke-width) |
| ::slotted() | HTMLテンプレート内にあるスロットに配置された任意の要素を指定します。 テンプレートとスロットについて これはshadow DOM内に配置されたCSSの中で使われた時のみ機能します。 |
