Visual Experience Composer で使用される要素セレクター
要素セレクターは、1つ以上の要素を識別できるCSS式です。
CSS セレクターに関する基本的な情報は、Mozilla Developer Network （MDN）の セレクター ドキュメントにあります。
アカウント設定で、要素クラスを使用するか、または要素 ID を使用するかを設定できます。 「Administration > Visual Experience Composer」をクリックし、任意のCSS セレクターを選択します。
- 要素IDを使用：同じIDが複数の要素に使用されている場合や、ページ読み込み時に要素IDが変更される場合は、無効にします。
- 要素クラスを使用: ページ上の要素クラスが変更される可能性がある場合は無効にします。
- 優先セレクターを使用: VECで一意のセレクターを使用して、web サイトの主要な領域を識別する場合に有効にします。
CSS セレクターを使用するタイミングと一意の ID を使用するタイミングについて詳しくは、Visual Experience Composer のベストプラクティスと制限事項を参照してください。
Targetが要素のセレクターを生成する方法 section_D89D954BCBFB486CA081BE183776A475
Targetは、簡単なアルゴリズムを使用してセレクターを作成します。 生成ロジックの簡単な説明を次に示します。
-
要素にID （例：
id="container"）がある場合、要素のセレクターは#containerです。例：
code language-html <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がセレクターに寄与します。次に例を示します。
code language-html <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を持つ要素のいずれかが見つかるまで親要素を上に移動します。次に例を示します。
code language-html <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)
上記のプロセスでは、次の点に注意してください。
- DOM で要素を一意に指定できてさえいれば、任意の CSS セレクターを使用することができます。
- 上記の方法は、Targetが使用する方法です。 Targetでは、このアプローチを使用する必要はありません。 1 つ目のポイントが守られていれば、任意のセレクターを追加できます。
- セレクターでは、任意の属性を使用できます。 このドキュメントでは、クラス名のみを例として使用します。