CSSセレクター
このページの内容:
axe Auditorアプリケーションのいくつかのエリアには、セレクターフィールドがあります。次の内容の一部としてテスト対象の特定のCSSセレクターを指定したい場合、この手順に従ってください。
- 共通コンポーネント (新しいテストケース > コンポーネント追加): 新しいテストケースを作成するときに、共通コンポーネントパネルで共通コンポーネントを定義する場合。
- ページエリアコンポーネント (新しいテストケース > ページ追加 > ページエリアスコープ): 新しいテストケースを作成するときに、ページ追加パネルでページエリアを定義する場合。
- ページエリアコンポーネント (自動および手動テストのためのページ準備 > ページエリアスコープ): テスト実行概要からアクセスする自動および手動テストのためのページ準備画面で、対象ページのページエリアを定義する場合。
はじめに
セレクターを見つけてコピーするには通常、ウェブブラウザに付属している「開発者ツール」を使用します。これらのツールは、ブラウザの種類によって名前が異なり、各ツールはキーボードショートカットを使用してツールにアクセスしたり、内部をナビゲートしたりすることができます。
ブラウザタイプ別のキーボードショートカットリファレンス
- Google Chrome - DevTools: キーボードショートカット - Google Chrome
- Apple Safari - ウェブインスペクター: キーボードショートカット
- Microsoft Edge - 開発者ツール: 開発者ツールキーボードショートカット
- Microsoft Internet Explorer - F12 開発者ツール: 開発者ツールキーボードショートカットリファレンス
Macの場合: 一般的に、Cmdキー（⌘）はOSXもしくはiOSデバイス上で[Ctrl]の代わりに使用できます。
開発者ツールを開く（Firefoxの例）
以下に示す例は、Mozilla Firefox開発者ツールの使用を示しています。Firefox開発者ツールを使用したキーボードショートカットについて詳しくは、Mozilla 開発者キーボードショートカットをご覧ください。
インスペクター（すべての開発者ツールを起動するものの1つ）を開くには、次のいずれかの方法があります：
- 要素が選択されていない場合: インスペクターオプションを開発者メニュー(Ctrl+Shift+I)から選択するか、またはFirefoxメニューバーからツール > ウェブディベロッパー > インスペクター (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 Selector ドキュメント または Selectors Level 3 W3C 推奨仕様。- 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ドキュメント内で特定のフラグメントをテストしたりノードを選択したりするために使用されます。カスケーディングスタイルシート（CSS3）言語は、画面上または音声によるHTMLドキュメントのレンダリングを記述し、スタイルプロパティをHTMLドキュメント内の要素にバインドするためにセレクタを使用します。
使用法: サブツリー内のすべての要素に対して式を評価することにより、セレクタは次のことに使用できます：
- 一連の要素を選択する
- 一連の要素から単一の要素を選択する
構造: セレクタは、ドキュメントツリー内の要素にセレクタがマッチするかどうかを決定する条件として（CSSルールでのように）使用される構造や、その構造に対応するHTMLまたはXMLフラグメントのフラットな説明として表されます。
タイプ: セレクタのタイプには以下が含まれます：
-
ユニバーサル: 任意の要素型の修飾名（*） 例えば、任意の名前空間のドキュメントツリー内で英語の要素の修飾名を指定するには、以下を入力します：
*[hreflang|=en] -
タイプ: 要素名の前に付けられるオプションの名前空間コンポーネントプレフィックス（|） 例えば、ドキュメントツリー内の見出し2要素を表すには、単に以下を入力します：
h2 -
属性: 要素の属性を表します（[]） 例えば、値に関わらず title 属性を持つ h3 要素を表すには、次のように入力します：
h3[title] -
クラス: クラス属性をそれぞれの名前空間で表すための「ピリオド」または「フルストップ」記法（.） 例えば、クラス="example" を持つすべての要素に緑色のスタイル情報を割り当てるには、次のように入力します：
.example { color: green } / クラス=example のすべての要素 */ -
ID: ID 型で宣言された属性は、要素をユニークに識別するために番号記号を使用します（#） 例えば、ID 型属性の値が「12345」の要素を表す ID セレクタを表すには、次のように入力します：
#12345 -
擬似クラス: ドキュメントツリーの外部情報の選択で、単純なセレクタでは表現できないもの（:） 例えば、クラス external を持ち、すでに訪問済みのリンクを表すセレクタを指定するには、次のように入力します：
a.external:visited -
擬似要素: ドキュメントツリーを越えた内容にアクセスするための擬似要素の名前の前に付く二重コロン（::） セレクタごとに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) - Selectors Level 3 を参照してください：https://drafts.csswg.org/selectors-3/