CSSセレクター

このページ:

・はじめにとキーボードショートカット(#start)

• 開発者ツールを開く。(#open)

・ページからセレクターをコピーする。(#copy)

• セレクターとは何ですか。(#overview)

axe Auditor（アックスオーディター）アプリケーションには、Selectorフィールドが設けられている箇所がいくつかあります。以下の内容としてテストする特定のCSSセレクターを指定したい場合は、次の手順に従ってください。

• 共通コンポーネント (新規テストケース＞コンポーネント追加)：新規テストケース作成時に「共通コンポーネント」パネルで共通コンポーネントを定義する場合。
• ページエリアコンポーネント*（新規テストケース＞ページ追加＞ページエリアスコープ）*: 新規テストケース作成時に「ページ追加」パネルでページエリアを定義する場合。
• ページ領域コンポーネント (自動・手動テスト用ページの準備 > ページ領域スコープ)。 Testing > Page Area Scope)：ページエリアを定義する場合 「テスト対象のページ」（「Prepare Page for Automated and Manual」画面） テストラン概要からアクセスできるテスト実行画面

はじめに

セレクターを見つけてコピーするには、通常、ウェブブラウザに付属している「開発者ツール」を使用します。これらのツールは、ブラウザの種類によって異なる名称があり、それぞれのブラウザはキーボードショートカットを提供しており、ツールへのアクセスやツール内の操作が可能です。

ブラウザの種類別キーボードショートカットリファレンス

• Google Chrome - 開発者ツール: Google Chromeのキーボードショートカット
• Apple Safari - Web Inspector（ウェブインスペクタ）: キーボードショートカット
• Microsoft Edge - 開発者ツール: 開発者ツールのキーボードショートカット
• Microsoft Internet Explorer - F12開発者ツール: [開発者ツールのキーボードショートカット] リファレンス](https://msdn.microsoft.com/en-us/library/dd565630.aspx)

Macの場合: 一般的に、Cmdキー（⌘）は、OSXまたはiOSデバイスでCtrlキーと置き換えて使用することができます。

Opening Developer Tools (Firefox Example)

次の例は、Mozilla Firefox（モジラ・ファイアフォックス）Developer Tools（デベロッパーツール）の利用方法を示しています。Firefox Developer Toolsでキーボードショートカットを使用する方法の詳細は、Mozilla開発者キーボードショートカットをご覧ください。

Inspector（インスペクター）（すべてのDeveloper Tools（デベロッパーツール）を起動できるツールの1つ）は、次のいずれかの方法で開くことができます。

• 要素が選択されていない場合: インスペクターを開発者メニュー**(Ctrl+Shift+I)から選択、またはFirefoxメニューバーのツール＞Web開発者＞インスペクター（Ctrl+Shift+C）**を選択します。
• 要素を選択した状態で: ウェブページ上の要素を右クリックし、コンテキストメニューから**「要素を検査 [(Q)]」{.kbd}**を選択してください。

ページからセレクターをコピーする

1.テストページの任意の領域上で右クリックし、表示されたメニューから選択してください。 **メニューから「要素の検査」**を選択してインスペクタを起動します。その後、ページ上の要素を選択できます（またはキーボードショートカット Ctrl+Shift+I を使用します）。

2.ターゲットとするCSSセレクターをコピーします。例えば、Firefox Developer Tools（ファイアフォックス デベロッパーツール）を使用している場合、インスペクターツールで現在選択されている要素に対して**右クリックして「一意のセレクタをコピー」を選択できます。必ず、適切にフォーマットされた完全な要素参照を貼り付けてください（例えば、id属性要素の値「main」をテストする場合、セレクターとして#main**を指定します）。

テスト対象のページ上で右クリックし、Firefox（ファイアフォックス）開発者ツール（デベロッパーツール）の右クリックメニューから

情報 - 例付きセレクター書式設定リファレンス: 正しく書式設定されたCSSセレクターおよび完全な要素参照の詳細については、『Mozilla Developer Web CSS Selector documentation』(https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors){.external}または『Selectors Level 3 W3C Recommendation』(http://www.w3.org/TR/css3-selectors/){.external}をご参照ください。

・セレクター: #id - #idセレクターは、指定されたIDを持つ要素にスタイルを適用します。 ・例: #main - 指定されたIDはmainです。 ・参照例: id="main"を持つ要素を選択します。

3.仮想クリップボードからコピーしたセレクターをセレクターフィールドに貼り付けます。

対象のコンポーネントまたはページ領域で検出された問題にアクセスすると、入力した特定のCSSセレクタに関連する問題も表示されます。

4.既知のバグ: ChromeブラウザでCSSセレクターを使用する場合 要素を右クリックして「検証」を選択し、開発者ツールの「Elements」タブでクリック対象のCSSセレクターを探し、要素＞コピー＞XPath または 要素＞コピー＞フルXPath を選択すると、常にこのエラーが返されます。 不明なエラーが発生しました。このテストケースにコンポーネントやページ領域が含まれている場合は、すべてのセレクタが有効であることを確認してください。 回避策: CSSセレクタのIDを見つけて、「コピー > セレクタをコピー」を選択してください。

セレクターとは何ですか？

簡単な回答: それらは、ウェブページ上の要素や要素のグループを識別するために使われる文字列です。

少し長めで、より技術的な説明：セレクターとは、ツリー構造内の要素にマッチするパターンであり、HTMLやXMLドキュメント内の特定の断片をテストしたり、ノードを選択したりするために使用できます。カスケーディングスタイルシート（CSS3）言語は、HTML文書を画面や音声でレンダリングする方法を規定し、スタイルをHTML要素に関連付けるためにセレクタを使用します。 HTMLドキュメント内の要素のプロパティ。

使用方法: サブツリー内のすべての要素に対して式を評価することにより、セレクターは次の目的で使用できます。

・要素のセットを選択する。 要素のセットを選択する。 一つの要素を選択する。

構造: セレクターは、ドキュメントツリー内でセレクターが一致する要素を決定する条件（CSSルールのように）として使用できる構造、またはその構造に対応するHTMLやXMLフラグメントの階層的でない（フラットな）記述を表します。

種類: セレクターの種類は次の通りです:

• ユニバーサル: 任意の要素型の修飾名 (*)。 例えば、任意の名前空間のドキュメントツリー内にある任意の英語名の要素の修飾名を指定するには、次のように入力します。

  *[hreflang|=en]

・型: 要素名の前に付加可能なオプションの名前空間コンポーネントプレフィックス（|）。 例えば、ドキュメントツリーで見出し2要素を表すには、次のように入力するだけです。

<code>h2</code>

• 属性: 要素の属性を表します（［］）。 例えば、値に関係なく title 属性を持つ h3 要素を表すには、次のように入力してください。

  h3[title]

• クラス: ピリオドまたは「フルストップ」表記で、それぞれの名前空間のクラス属性を表します（.）。 たとえば、class="example" を持つすべての要素に緑色のスタイル情報を割り当てるには、次のように入力します。

  .example { color: green } / all elements with 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/を参照してください。

関連トピック：

• 共通コンポーネントの追加
• テストケースにページを追加(adding_pagesindex1)