CSSセレクター
このページで：
axe Auditor アプリケーションには、 セレクター フィールドを提供するいくつかのエリアがあります。以下のパートとしてテストする特定のCSSセレクターを指定する場合は、この手順に従ってください：
- 共通コンポーネント （新しいテストケース > コンポーネントを追加）：新しいテストケースを作成するときに、共通コンポーネントパネルで共通コンポーネントを定義する際に。
- ページエリアコンポーネント （新しいテストケース > ページを追加 > ページエリアスコープ）：新しいテストケースを作成するときに、ページを追加パネルでページエリアを定義する際に。
- ページエリアコンポーネント （自動および手動テスト用ページを準備 > ページエリアスコープ）：テスト対象ページのページエリアを定義する テストラン概要からアクセスする自動および手動テスト用ページを準備画面で。
始めに
セレクターの位置を特定してコピーするには、通常、ウェブブラウザに付随する「デベロッパーツール」を使用します。これらはブラウザタイプによって異なる名前を持ち、それぞれが キーボードショートカット を提供しており、ツールへのアクセスやツール内のナビゲーションが可能です。
ブラウザタイプ別キーボードショートカット参考
- Google Chrome - DevTools： キーボードショートカット - Google Chrome
- Apple Safari - Webインスペクタ： キーボードショートカット
- Microsoft Edge - デベロッパーツール： デベロッパーツール キーボードショートカット
- Microsoft Internet Explorer - F12 デベロッパーツール： デベロッパーツール キーボードショートカット参考
Macで：一般的に、 Cmd キー（⌘）は、 [Ctrl] に置き換えることができます。
デベロッパーツールを開く（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 ドキュメント または 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またはXMLフラグメントのフラットな記述を条件（CSSルールにおけるような）として使用できる構造を表します。
タイプ：セレクタータイプには以下が含まれます：
-
ユニバーサル：任意の要素タイプの修飾名（*） 例えば、任意の名前空間でドキュメントツリー中の任意の英語の要素を指定するには、次のように入力します：
*[hreflang|=en] -
タイプ：要素名に前置されるオプションの名前空間コンポーネントプレフィックス（|） 例えば、ドキュメントツリーのh2要素を表すには、単に次のように入力します：
h2 -
属性：要素の属性を表します（[]） 例えば、タイトル属性を持つh3要素を表すには、その値に関わらず、次のように入力します：
h3[title] -
クラス：それぞれの名前空間のクラス属性を表すためのピリオドまたは「フルストップ」表記（.） 例えば、クラス="example"を持つすべての要素に緑色のスタイル情報を割り当てるには、次のように入力します：
.example { color: green } / クラスがexampleのすべての要素 */ -
ID：ID型として宣言された属性は、番号記号（#）で要素を一意に識別します 例えば、ID属性の値が「12345」の任意の要素を表すIDセレクターを表すには、次のように入力します：
#12345 -
擬似クラス：シンプルなセレクターでは表現できない、ドキュメントツリー外の情報の選択（:） 例えば、クラスexternalを持つ既に訪問済みのリンクを表すセレクターを指定するには、次のように入力します：
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/