要素セレクターとは、1 つ以上の要素を指定できる CSS 式です。
CSS セレクターの基本的な情報については、Mozilla Developer Network(MDN)にあるセレクターについてのドキュメントを参照してください。
アカウント設定で、要素クラスを使用するか、または要素 ID を使用するかを設定できます。管理/Visual Experience Composerをクリックし、希望のCSSセレクターを選択します。
要素クラスは、A/B テスト、自動パーソナライゼーションおよび多変量分析テストアクティビティでセレクターとして使用することができます。
CSS セレクターを使用するタイミングと一意の ID を使用するタイミングについて詳しくは、Visual Experience Composer のベストプラクティスと制限事項を参照してください。
Target では、シンプルなアルゴリズムを使用してセレクターが作成されます。以下では、生成のロジックについて簡単に説明します。
id="container"
のように要素に ID がある場合、要素のセレクターは#container
になります。
例:
<div class="wrapper">
<div id="container"> <!-- Selector is computed for this element -->
<ul class="navigation">
<li class="item active"> Home </li>
<li class="item"> Men </li>
<li class="item"> Women </li>
<li class="item"> Kids </li>
</ul>
</div>
</div>
要素にクラス属性が含まれている場合、Target は要素に存在するすべてのクラスのうち、最初のクラスを利用します。
Target は、<HTML>
要素または ID を持つ要素が見つかるまで親要素を分析します。要素に ID が含まれており、セレクターが子孫に対して計算されている場合、この要素の ID がセレクターに使用されます。
次に例を示します。
<div class="wrapper">
<div id="container"> <!-- id is present here. It contributes to selector -->
<ul class="navigation">
<li class="item active"> Home </li> <!-- Selector is computed for this element -->
<li class="item"> Men </li>
<li class="item"> Women </li>
<li class="item"> Kids </li>
</ul>
</div>
</div>
この例では、次のようになります。
セレクター:#container
> ul.navigation:eq(0)
> li.item:eq(0)
(「>」は直接の子を示します。)
eq
は、UL タグで、最初のクラスが navigation
の要素のインデックスを示しています。したがって、index
は 0 になります。詳しくは、MDN のセレクターについての記事を参照してください。
要素にクラスが含まれていない場合、Target は要素のtagName
を使用し、<HTML>
要素または ID を持つ要素が見つかるまで親要素を上にたどります。
次に例を示します。
<div class="wrapper">
<div id="container"> <!-- id is present here. It contributes to selector -->
<ul class="navigation">
<li> Home </li>
<li> Men </li>
<li class="active"> Women </li>
<li> Kids </li><!-- Selector is computed for this element -->
</ul>
</div>
</div>
セレクター:#container
> ul.navigation(0)
> li:nth-of-type(4)
詳しくは、CSS-Tricks Web ページの:nth-of-type についての解説を参照してください。
上記のプロセスでは、次の点に注意してください。