Un selettore di elementi è un’espressione CSS che può identificare uno o più elementi.
Puoi trovare informazioni di base sui selettori CSS nel documento sui selettori in Mozilla Developer Network (MDN).
Puoi specificare se utilizzare l’ID o la classe degli elementi nelle preferenze dell’account. Clic Amministrazione > Compositore esperienza visivo, quindi scegli i selettori CSS preferiti.
Le classi di elementi sono disponibili come selettori nelle attività per test A/B, Personalizzazione automatizzata e test multivariati.
Per informazioni su quando utilizzare selettori CSS e quando utilizzare ID univoci, consulta Best practice e limitazioni del Compositore esperienza visivo.
Target utilizza un semplice algoritmo per creare un selettore. Ecco una brevissima spiegazione della logica di generazione:
Se un elemento ha un ID, ad esempio id="container"
, allora il selettore per l’elemento è #container
.
Ad esempio:
<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>
Se un elemento contiene un attributo di classe, Target tenta di sfruttare la prima classe di qualsiasi classe presente nell’elemento.
Target tenta di analizzare l’elemento padre fino a quando non trova l’elemento <HTML>
o un elemento con un ID. Ogni volta che un elemento contiene un ID e il selettore viene calcolato sul suo discendente, l’ID di questo elemento contribuisce al selettore.
Ad esempio:
<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>
In questo esempio:
Selettore: #container
> ul.navigation:eq(0)
> li.item:eq(0)
(“ > ” indica l’elemento figlio diretto).
eq
comunica all’indice che c’è un elemento con "tagName=UL" e che la prima classe è navigation
. Pertanto, l’index
è 0. Per ulteriori informazioni, leggi l’articolo sui selettori in MDN.
Se un elemento non contiene una classe, Target utilizza tagName
per l’elemento ed analizza l’elemento padre fino a quando non viene trovato l’elemento <HTML>
o un elemento con un ID.
Ad esempio:
<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>
Selettore: #container
> ul.navigation(0)
> li:nth-of-type(4)
Puoi scoprire di più su nth-of-type nella pagina web dei trucchi per CSS.
Nel processo sopra indicato: