英語からAIを使用して翻訳されました
この文書はAI技術を使用して翻訳されたことにご注意ください。正確性を維持するよう努めていますが、一部の詳細は元のテキストを完全に反映していない場合があります。情報に不明な点がある場合は、英語版を参照してください。
ほとんどのユーザーシナリオアクションは、正確にピンポイントする必要があるウェブページに存在する要素に適用されます。以下のHTMLコードスニペットには、例えば3つの要素があります：分割 <div>、段落 <p> およびリンク <a>
<div>
<p>
クリック <a href="page.html" class="myClass" id="myId">ここ</a>
</p>
</div>
要素を正確にターゲットにするために、シンセティック・モニタリングは異なる選択モードを提供します：タグ（例えば“p”）、識別子（"myIdentifier"）、名前（ウェブフォームで使用）、XPATHおよびCSS。
CSS選択は、ウェブページ内で最も多用途で包括的な要素選択モードです（XPATHは強力ですが複雑で、ウェブの専門家によってあまり使用されていません）。CSSセレクタは、単独でほぼすべての他の選択モード：タグ、識別子、名前を再現し、さらに進むことができます。
このドキュメントのセクションの目的は、この選択方法が提供する可能性に慣れてもらうことです。
Chrome DevToolsの使用
私たちのサービスは、人気のあるブラウザであるChromeに基づいています。シンセティック・モニタリングのようにCSSセレクタをテストするには、Chromeで関連するページを開き、WindowsではCtrl + Shift + I、macOSでは⎇ + ⌘ + Iを使用してこのブラウザに統合された開発者ツールを使用します。
HTMLコードは「要素」タブを介して表示されます（注：これはドキュメントオブジェクトモデル、またはDOMです。これは、ブラウザが理解するページのHTMLソースコードを表し、ページのJavaScriptコードの実行後にそれが変更されている可能性があります）。
ホバー時の要素
ページ内の要素にホバーすると、「要素」タブでハイライト表示されます。同様に、「要素」タブ内の要素にホバーすると、ウェブページでハイライト表示されます。
セレクタ検索
開発者ツールで、Ctrl + Fを使用すると、検索バーが表示されます。この検索バーにCSSセレクタを入力して確認できます。得られた結果の数は検索バーに表示されます。最初に見つかった要素はコード内でハイライト表示されます。
ブラウザ生成のセレクタをコピーする
「要素」タブの項目を右クリックすると、「コピー」を選択し、その後「セレクタをコピー」を選ぶことができます。CSSセレクタがクリップボードにコピーされ、シンセティック・モニタリングで使用できます。
ただし、このセレクタは非常に特定的であることが多く、したがって変更に対してあまり堅牢ではありません。このセレクタは定期的にアップグレードする必要があるかもしれません。しかし、より適切なセレクタを決定するための基礎として使用できます。
HTMLコードと語彙
以下の例では：
<div>
<p>
<a href="page.html" class="myClass secondClass" id="myIdentifier">私のリンク</a>
</p>
</div>
-
<a>は HTML要素 で、開く<a>と閉じる</a>タグで構成されています。 -
href、classおよびidは 要素の属性 です<a>。 - 「page.html」は 属性の値
hrefです。 -
<p>は 直接の親 要素です<a>要素の。 -
<div>は 間接の親 要素です<a>要素の。
HTML要素は、1つ以上のクラスを持つことができます（class 属性内で、スペースで区切られています）。異なる複数の要素が同じクラスまたは共通のクラスを持つことがあります。
HTML要素は、識別子（id 属性）を持つことができます。識別子は一意であり、2つの要素が同じ識別子を持つことはできません（このフィールドでは発生することがありますが、それはエラーであり、エッジ効果を引き起こす可能性があります）。重複した識別子は、私たちの詳細な分析レポートで示されます。
基本的なCSSセレクタ
名前によるタグの選択
タグによって1つ以上の要素を選択するには、タグ名を直接使用します a、 span、 div、 headerのように。
1つ以上のクラスによる選択
1つ以上のクラスによって1つ以上の要素を選択するには、クラス名の前にピリオド「.」を付けて使用します。
例：
.myClass
要素が持つ必要がある他のクラスを指定することで、選択を絞り込むことができます。常に「.」を前に付けて、前のクラスに付けます。
.myClass.secondClass
属性の存在による選択
特定の属性を持つ要素を選択するには、関連する属性を角括弧「[ ]」の間に定義する必要があります。
例：
a[download]
すべてのリンクを選択します download 属性を持つ。
属性の値による選択
特定の属性を持つ要素を選択するには、関連する属性とその値を角括弧「[ ]」の間に定義する必要があります。
例：
[data-analytics="GMT324-3"]
属性の値の一部による選択
一部のサイトでは、属性の一部が自動的に生成され、リリースごとに変更されることがあります。例えば：
<p id="clientP-4D92J_keyPId"/>この要素をターゲットにする必要がある場合：
- 値の先頭を使用する場合は、演算子「^="」を使用します。
例：
[id^="clientP-"]-
値の末尾を使用する場合は、演算子「$="
例：[id$="keyPId"] -
値に含まれる任意のテキストを使用する場合は、演算子「*="
例：[id*="ntP-4D92J_k"]
識別子による要素の選択
一意の識別子によって要素を選択するには、識別子の名前の前にハッシュ「#」を付けて使用します。
#myId
識別子は通常一意であるため、このセレクタは1つの要素のみを返すことが期待されます。したがって、複数の識別子を付けるべきではありません。
セレクタの構成
セレクタを絞り込むために、シンプルな選択モードを組み合わせることができます。したがって、タグとその含まれるクラスの1つによって要素を選択するには、次のように使用できます：
a.myClasse
識別子は最も正確なセレクタであり、常に宣言の最初にあり、単独で十分なことが多いです。
他の要素にある要素の選択
親要素と子要素のセレクタはスペースで区切られます。親要素は直接の親または間接の親であることができます。
div a
すべての <a> 要素は <div> 親要素を持ちます。
.parent .child
すべての child クラスを持つ要素は、 parent クラスを持つ要素を親に持ちます。
#parent .child
すべての child クラスを持つ要素は、必ず一意で、識別子 parent を持つ親に含まれています。
#header div span a
任意のリンクは、 <span> 親を持ち、その親が <div> 親を持ち、識別子 header を持つ親要素に含まれています。
<div id="header">
<div>
<span><strong><a href="#">セレクタによって指定されたリンク</a></strong></span>
</div>
<span><a href="#">セレクタによって指定されていないリンク</a></span>
</div>
リマインダー: 子要素は必ずしも親の直接の子ではありません。
アドバンス CSS セレクタ
直接の子要素の選択
#parent > .child
識別子 parent を持つ要素の直接の子である child クラスを持つ要素を選択します。
ユースケース: 複数のネストされた要素 - 例: メニュー - ですが、最初のレベルのみが選択されます。
隣接要素（または兄弟要素）の選択
.abel + .cain
クラス abel を持つ要素の後に続く cain クラスを持つ要素を選択します。
ユースケース: 常に他の要素の後にある要素を選択しようとしますが、単独で効果的に指摘するのは難しいです。
n 番目の要素の選択（暗黙の直接親の）
親内の位置によって要素を選択するには、 :nth-child() （「n 番目の子要素」を意味します）を使用し、選択する要素の位置をパラメータとして指定します。
例:
a:nth-child(2)
直接の親の二番目の子であるすべてのリンクを選択します。
除外を伴う要素の選択
別の単純なセレクタと一致しない限り項目を選択するには、除外するセレクタをパラメータとして使用して :not() を使用します。
例:
a:not(.excluded)
exclude クラスを持たないすべてのリンクを選択します。
その他のセレクタ
多くの CSS セレクタがあり、新しいものが定期的に追加されています: おすすめします