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開発者キーボードショートカットをご覧ください。
インスペクタ（すべての開発者ツールを起動するツールの一つ）は以下のいずれかの方法で開くことができます:
- 要素が選択されていない場合: インスペクタオプションを開発者メニュー(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を持つ要素を選択します。
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 -
属性：要素の属性を表します （[]） 例えば、タイトル属性を持つh3要素を、その値が何であれ表すには、次のように入力します：
h3[title] -
クラス：クラス属性を表すためのピリオドまたは「フルストップ」表記 （。） 例えば、クラス="example"を持つすべての要素に緑色のスタイル情報を割り当てるには、次のように入力します：
.example { color: green } / クラス=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) - Selectors Level 3 を参照してください: https://drafts.csswg.org/selectors-3/