フィーチャーのタグ付けでサポートされているCSSセレクターは何ですか?

最終更新日:

概要

Pendoでは、アプリケーション内の特定の要素を識別するフィーチャールールとしてCSSセレクターを使用しています。フィーチャーにタグを付ける際に、PendoのSuggested Matchに代わるCSSセレクターを選択したい場合は、[カスタムCSS]を選択して目的の要素をターゲットにすることができます。

Screen_Shot_2020-11-17_at_10.01.33_AM.png

CSSセレクターの基本的な参考情報についてはこちらをクリックしてください。使用されるさまざまな構文の例をご紹介します。

サポートされる構文

  • .class
  • #id
  • element
  • element element
  • element,element
  • element > element
  • [attribute] - "href"と"value"がサポートされます
  • [attribute="value"]
  • [attribute*="value"]
  • :nth-child(index) - 注:indexは1から始まる番号です。
  • :contains("text")
  • ^=
  • $=

siblingsはサポートされません

 

注:[attribute='value']セレクターを使用する際には、特定の属性のみが許可されます。Pendoが収集しているHTML属性の一覧はこちらです。

 

:contains()の使用例

ここでは「Next」というテキストが入っているボタンをターゲットにする例を紹介します。セレクターのテキストは、HTMLのテキストと完全に一致する必要があります。

Screen_Shot_2020-11-17_at_9.57.22_AM.png
注:ネストされた要素(例:別のクラス内のクラス)を使用している場合、1つのフィーチャータグに複数のcontainsのルールを使用することはできず、containsのルールはタグ内の最後のフィーチャーに存在する必要があります。