CSSセレクタ
このページについて：
axe Auditorアプリケーションには、いくつかのエリアに セレクタ フィールドがあります。以下の項目の一部としてテストする特定のCSSセレクタを指定する場合、この手順に従ってください。
- 共通コンポーネント （新しいテストケース > コンポーネントを追加）：新しいテストケースを作成する際に、共通コンポーネントパネルで共通コンポーネントを定義する場合。
- ページエリアコンポーネント （新しいテストケース > ページを追加 > ページエリアスコープ）：新しいテストケースを作成する際に、ページを追加パネルでページエリアを定義する場合。
- ページエリアコンポーネント （自動および手動テストのためのページ準備 > ページエリアスコープ）：テストラン概要からアクセスされる、自動および手動テストのためのページ準備画面で「テスト中のページ」のページエリアを定義する場合。
はじめに
セレクタの検索とコピーは通常、Webブラウザに付属している「開発者ツール」を使用して行います。これらのツールはブラウザの種類によって名前が異なりますが、いずれも キーボードショートカット を提供しており、それを使ってツールにアクセスしたり、ツール内をナビゲートできます。
ブラウザタイプ別キーボードショートカットリファレンス
- Google Chrome - DevTools： キーボードショートカット - Google Chrome
- Apple Safari - Webインスペクタ： キーボードショートカット
- Microsoft Edge - 開発者ツール： 開発者ツールキーボードショートカット
- Microsoft Internet Explorer - F12開発者ツール： 開発者ツールキーボードショートカットリファレンス
Macの場合：通常、 Cmd キー（⌘）は [Ctrl] キーの代わりにOSXまたはiOSデバイスで使用できます。
開発者ツールの開き方（Firefoxの例）
以下の例は、Mozilla Firefox開発者ツールの使用方法を示しています。Firefox開発者ツールのキーボードショートカットの使用方法について詳しくは、 Mozilla開発者キーボードショートカットを参照してください。
インスペクターを開く（すべての開発者ツールを起動させるツールの1つ）には、次のいずれかの方法があります。
- 要素を選択せずに： インスペクター オプションを 開発者 メニューから選択します （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 ウェブ CSS セレクターのドキュメント または Selectors Level 3 W3C 勧告を参照してください。- Selector：
#id→#idセレクターは指定された id を持つ要素にスタイルを適用します。 - Example：
#main→ 指定された id はmainです。 - Example Reference：指定した
id="main"を持つ要素を選択します。
- Selector：
-
仮想クリップボードからコピーしたセレクターを Selector フィールドに貼り付けます。
ターゲットとするコンポーネントやページ領域で見つかった結果の問題にアクセスすると、入力した特定の CSS セレクターに関連するものが含まれます。 -
既知のバグ: Chrome ブラウザで CSS セレクターを使用する際。右クリックで検証を開き、Dev ツールを開き、要素タブでターゲットとなる 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] -
クラス：該当する名前空間のクラス属性を表すためのピリオドまたは「フルストップ」表記（.） 例えば、class="example"の全ての要素に緑の色スタイル情報を割り当てるには、次のように入力します。
.example { color: green } / class=exampleの全要素 */ -
ID：ID型に宣言された属性は、番号記号で要素を一意に識別します（#） 例えば、ID属性値が「12345」であるすべての要素を表すIDセレクタにするには、次のように入力します。
#12345 -
疑似クラス：単純なセレクタでは表現できないドキュメントツリー外の情報の選択（：） 例えば、class 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) - Selectors Level 3 を参照してください： https://drafts.csswg.org/selectors-3/