CSSセレクター
このページについて：
axe Auditorアプリケーションには、いくつかの領域で セレクター フィールドが提供されています。以下のように特定のCSSセレクターをテストする際に、この手順に従ってください：
- 共通コンポーネント （新しいテストケース > コンポーネントの追加）：新しいテストケースを作成する際に、共通コンポーネントパネルで共通コンポーネントを定義する場合。
- ページエリアコンポーネント （新しいテストケース > ページの追加 > ページエリアスコープ）：新しいテストケースを作成する際に、ページの追加パネルでページエリアを定義する場合。
- ページエリアコンポーネント （自動および手動テストのためのページ準備 > ページエリアスコープ）：「テスト対象ページ」のページエリアを自動および手動テスト用準備画面で定義する場合。
はじめに
セレクターを見つけてコピーするには、通常、お使いのウェブブラウザに付属する「開発者ツール」を使用します。これらのツールにはブラウザの種類に応じた異なる名称があり、それぞれが キーボードショートカット を提供しており、それらのツールにアクセスし、ナビゲートすることができます。
ブラウザタイプ別キーボードショートカットリファレンス
- Google Chrome - DevTools： キーボードショートカット - Google Chrome
- Apple Safari - ウェブインスペクター： キーボードショートカット
- Microsoft Edge - 開発者ツール： 開発者ツールキーボードショートカット
- Microsoft Internet Explorer - F12 開発者ツール： 開発者ツールキーボードショートカットリファレンス
Macで：通常、 Cmd キー（⌘）は [Ctrl] キーとしてOSXまたはiOSデバイスで使用できます。
開発者ツールを開く（Firefoxの例）
以下の例は、Mozilla Firefox 開発者ツールの使用を示しています。Firefox 開発者ツールでキーボードショートカットを使用する方法について詳しくは、 Mozilla 開発者キーボードショートカットを参照してください。
インスペクター（開発者ツールの一部であり、全ツールを開く）を開くには、次のいずれかの方法を使用できます：
- 要素が選択されていない場合：次の操作を選択します。 インスペクター オプションを 開発者 メニューから選択します （Ctrl+Shift+I）、またはFirefoxメニューバーから、 ツール > ウェブ開発者 > インスペクター（Ctrl+Shift+C）を選択します。
- 要素を選択した状態で*: 右クリック してウェブページ上の要素を選択し、 要素を調査 [(Q)]{.kbd}を選択します。
ページからセレクタをコピーする
-
Right-click テストページの目的の領域で、
Inspect Element メニューからインスペクターを起動し、ページ上の要素を選択します（またはキーボードショートカットCtrl+Shift+Iを使用）。
-
ターゲティングするCSSセレクタをコピーします。たとえば、Firefox開発者ツールを使用する場合は、 right-click > Copy Unique Selector インスペクターツールで現在選択されている要素に対して行います。適切にフォーマットされた完全な要素リファレンスを貼り付けてください（たとえば、
id属性要素の値 'main' をテストするには、#mainをセレクタとして指定します）。
Information - Selector Formatting Reference with Example:
正しくフォーマットされたCSSセレクタと完全な要素リファレンスの詳細については、 Mozilla Developer Web CSS Selector documentation または Selectors Level 3 W3C Recommendationを参照してください。- Selector:
#id→#idセレクタは、指定されたidを持つ要素をスタイル設定します。 - Example:
#main→ 指定されたidはmainです。 - Example Reference: 指定されたidを持つ要素を選択します
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 -
属性：要素の属性を表す（[]） 例えば、値が何であれ、タイトル属性を持つh3要素を表すには、次を入力します：
h3[title] -
クラス：該当する名前空間のクラス属性を表すためのピリオドまたは「フルストップ」表記（.） 例えば、class="example"のすべての要素にグリーンカラーのスタイル情報を割り当てるには、次を入力します：
.example { color: green } / class=example のすべての要素 */ -
ID：ID型の属性として宣言されたものは、ナンバーサイン（#）で一意に要素を識別します 例えば、ID型の属性値が「12345」である任意の要素のIDセレクタを表すには、次を入力します：
#12345 -
疑似クラス：単純セレクタでは表現できないドキュメントツリーの外部情報の選択（:） 例えば、外部クラスを持ち、すでに訪れたリンクを表すセレクタを指定するには、次を入力します：
a.external:visited -
疑似要素：疑似要素の名前に続く二重コロンは、現在のドキュメントツリーを超えるコンテンツへのアクセスを許可し、セレクタにつき一つだけ許可されます（::）
例えば、すべてのp要素の最初の行の文字を大文字に変更するには、次を入力します：
p::first-line { text-transform: uppercase } -
コンビネーター：子または兄弟要素のような祖先を示す階層的なパスを指定することができます ( ) または (+)
例えば、h1要素の子孫であるem要素を対象とするには、次を入力します：
h1 em.
これは、次の断片の正確で完全ですが部分的な説明です：
<h1>この <span class="myclass"> ヘッドライン は <em>非常に>/em> 重要です</span></h1>
構文: セレクターの基本的な「文法」には次のものが含まれます：
- *: 0 個以上（注意：暗黙の場合は省略可能なため、あまり使用されません。）
- +: 1 個以上
- ?: 0 または 1 個
- |: 代替案の区切り
- [ ]: グループ化
包括的参照: 詳細については、World Wide Web Consortium (W3C) - セレクターズ レベル 3 を参照してください： https://drafts.csswg.org/selectors-3/