CSSセレクタ
このページについて：
axe Auditorアプリケーションには、次に示すプロセスの一環として特定のCSSセレクタをテストするための セレクタ フィールドを提供するエリアがいくつかあります。
- 共通コンポーネント (新しいテストケース > コンポーネントを追加)： 新しいテストケース作成時に「共通コンポーネント」パネルで共通コンポーネントを定義する際。
- ページエリアコンポーネント (新しいテストケース > ページを追加 > ページエリアの範囲)： 新しいテストケース作成時に「ページの追加」パネルでページエリアを定義する際。
- ページエリアコンポーネント (自動および手動テスト用のページを準備 > ページエリアの範囲)： テストラン概要からアクセスする「自動および手動テスト用のページを準備」画面で「テスト中のページ」のページエリアを定義する際。
はじめに
セレクタを見つけてコピーするには、通常、Webブラウザに付属の「開発者ツール」を使用します。これらの名称はブラウザの種類によって異なりますが、それぞれに キーボードショートカット があり、ツールへのアクセスやツール内のナビゲーションを行うのに役立ちます。
ブラウザタイプ別キーボードショートカットリファレンス
- Google Chrome - DevTools： Google Chromeのキーボードショートカット
- Apple Safari - Web Inspector： キーボードショートカット
- Microsoft Edge - 開発者ツール： 開発者ツールのキーボードショートカット
- Microsoft Internet Explorer - F12 開発者ツール： 開発者ツールのキーボードショートカット参照
Macで： 通常、 Cmd キー（⌘）は [Ctrl] の代わりにOSXまたはiOSデバイスで使用できます。
開発者ツールを開く（Firefoxの例）
以下の例は、Mozilla Firefox 開発者ツールの使用法を示しています。Firefox開発者ツールでのキーボードショートカットの使用について詳しくは、 Mozilla Developer キーボードショートカットを参照してください。
インスペクタ（開発者ツールの一部であり、すべてを開くことができる）を以下のいずれかの方法で開くことができます：
- 要素を選択せずに： 次の インスペクター オプションを 開発者 メニューから選択します （Ctrl+Shift+I）、またはFirefoxメニューバーから ツール > Web開発者 > インスペクター（Ctrl+Shift+C）を選択します。
- 要素を選択した状態で： 右クリック して、ウェブページの要素を選び、 要素を調べる [(Q)]{.kbd}を選択します。
ページからセレクターをコピーする
-
Right-click テストページの目的の領域で、次に選択してから、
Inspect Element メニューからインスペクターを起動し、ページ上の要素を選択できるようにします（またはキーボードショートカットCtrl+Shift+Iを使用）。
-
対象とするCSSセレクターをコピーします。たとえば、Firefox Developer Toolsを使用する際には、 right-click > Copy Unique Selector インスペクターで現在選択されている要素に対して行います。適切にフォーマットされた完全な要素参照を貼り付けることを確認してください（たとえば、
id属性要素を「main」の値とテストするには、#mainをセレクターとして指定します）。
Information - Selector Formatting Reference with Example：
きちんとフォーマットされたCSSセレクターと完全な要素参照についての詳細は、 Mozilla Developer Web CSSセレクター ドキュメント または Selectors Level 3 W3C Recommendationを参照してください。- Selector：
#id→#idセレクターは、指定されたidを持つ要素をスタイリングします。 - Example：
#main→ 指定されたidはmainです。 - Example Reference：指定された要素を選択します
id="main"。
- Selector：
-
バーチャルクリップボードからコピーしたセレクターを、 Selector フィールドに貼り付けます。
ターゲットにしたコンポーネントやページ領域で見つかった結果の問題を確認すると、入力した特定のCSSセレクターに関連する問題が含まれていることがわかります。 -
既知のバグ：ChromeブラウザでCSSセレクターを使用する場合。右クリックインスペクト、開発者ツールを開き、要素タブで対象のCSSセレクターを見つけクリックし、要素>コピー>XPathまたは要素>コピー>フルXPathが常にこのエラーを返します、\「不明なエラーが発生しました。このテストケースにコンポーネントやページ領域が含まれている場合は、すべてのセレクターが有効であることを確認してください」
Workaround: CSSセレクターのIDを見つけて使用します Copy > Copy Selector。
セレクターとは？
簡単な説明：セレクターは、ウェブページ上の要素やグループを識別するための文字列です。
やや詳細で技術的な説明：セレクターはツリーストラクチャー内の要素に対して一致するパターンで、特定のフラグメントをテストするためやHTMLまたはXMLドキュメント内のノードを選択するために使用されます。Cascading Style Sheet (CSS3) 言語は、画面や音声でHTMLドキュメントのレンダリングを説明し、CSSセレクターを使用してスタイルプロパティをHTMLドキュメント内の要素に紐付けます。
使用方法：サブツリー内のすべての要素に対して評価を行うことで、セレクターを使用して次のことができます：
- 一群の要素を選択する
- 要素群から一つの要素を選択する
構造： セレクターとは、文書ツリー内でどの要素にセレクターが一致するかを決定する条件（CSSルールのように）として使用できる構造、またはその構造に対応するHTMLまたはXMLフラグメントの単純な説明を表します。
タイプ： セレクタータイプには以下が含まれます：
-
ユニバーサル： 任意の要素タイプの限定名（*) たとえば、任意の名前空間の文書ツリー内の任意の英語要素の限定名を指定するには、次のように入力します：
*[hreflang|=en] -
タイプ： 要素名の前に付けることができるオプションの名前空間コンポーネントのプレフィックス（|) たとえば、文書ツリー内の見出し2要素を表すには、単に次のように入力します：
h2 -
属性： 要素の属性を表します（[]) たとえば、タイトル属性を持つh3要素を表すには、値に関係なく次のように入力します：
h3[title] -
クラス： クラス属性を表すためのピリオドまたは「フルストップ」表記（.) たとえば、クラス="example"を持つすべての要素に緑色のスタイル情報を割り当てるには、次のように入力します：
.example { color: green } / class=exampleを持つすべての要素 */ -
ID： IDタイプとして宣言された属性は、番号記号（#）を使用して、要素を一意に識別します。 たとえば、IDタイプの属性値が「12345」の任意の要素を表すIDセレクターを指定するには、次のように入力します：
#12345 -
擬似クラス： 単純なセレクターでは表現できない文書ツリー外の情報の選択（：） たとえば、クラスexternalを持ち、すでに訪問済みのリンクを表すセレクターを指定するには、次のように入力します：
a.external:visited -
擬似要素： 擬似要素の名前の前に2つのコロンを付けることで、現在の文書ツリーの外部のコンテンツにアクセスすることができ、セレクターごとに1つのみ許可されます（::）
たとえば、すべてのp要素の最初の行の文字を大文字に変更するには、次のように入力します：
p::first-line { text-transform: uppercase } -
コンビネータ： 祖先としての子要素や兄弟要素などの階層パスを指定することができます。 ( ) または (+）
たとえば、h1要素の子孫であるem要素を対象とするには、次のように入力します：
h1 em.
これは、以下のフラグメントの正しく有効な、ただし部分的な説明です：
<h1>This <span class="myclass"> headline is <em>very>/em> important</span></h1>
構文：セレクタの基本的な「文法」は次の通りです：
- *：0 またはそれ以上（注：暗黙で省略可能なため、あまり使用されません。）
- +：1 またはそれ以上
- ?：0 または 1
- |：代替案を分ける
- [ ]：グループ化
包括的リファレンス：詳細については、World Wide Web Consortium (W3C) - セレクタレベル 3 を参照してください： https://drafts.csswg.org/selectors-3/