DocumentaçãoTargetGuia do Target

Seletores de elementos usados no Visual Experience Composer

Last update: Wed Aug 27 2025 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Tópicos:

Um seletor de elementos é uma expressão CSS que pode identificar um ou mais elementos.

Você pode encontrar informações básicas sobre os seletores de CSS no documento Seletores no Mozilla Developer Network (MDN).

Você pode definir se deseja usar elemento em classes ou ID de elemento nas suas preferências de conta. Clique em Administration > Visual Experience Composer e escolha seus seletores de CSS preferidos.

  • Usar IDs de elemento: desabilite se a mesma ID for usada para vários elementos ou as IDs de elemento podem mudar no carregamento da página.
  • Usar classes de elemento: desabilite se as classes de elemento em uma página puderem mudar.
  • Usar seletores preferenciais: ative esta opção se quiser usar seletores exclusivos no VEC para identificar as principais áreas do site.
NOTE
As Classes de Elemento estão disponíveis como seletores em atividades A/B Test, Automated Personalization e ​ Multivariate Test.

Para obter informações sobre quando usar seletores de CSS e quando usar IDs exclusivas, consulte Práticas recomendadas e limitações do Visual Experience Composer.

Como Target gera um seletor para um elemento section_D89D954BCBFB486CA081BE183776A475

Target usa um algoritmo simples para criar um seletor. Aqui está uma breve explicação da lógica de geração:

  1. Se um elemento tiver uma ID, por exemplo id="container", o seletor do elemento é #container.

    Por exemplo:

    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>

  2. Se um elemento contiver um atributo de classe, Target tentará aproveitar a primeira classe das classes presentes no elemento.

    Target tenta analisar o elemento pai até encontrar o elemento <HTML> ou um elemento com uma ID. Sempre que um elemento contém uma ID e o seletor é calculado em seu filho descendente, a ID desse elemento contribui para o seletor.

    Por exemplo:

    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>

    Neste exemplo:

    Seletor: #container > ul.navigation:eq(0) > li.item:eq(0) (" > " indica o filho imediato.)

    eq informa ao índice que há um elemento com "tagName = UL" e a primeira classe é navigation. Portanto, index é 0. Consulte o artigo Seletores no site MDN para obter mais informações.

  3. Se um elemento não contiver uma classe, Target usará tagName para o elemento e navegará pelo elemento pai até que o elemento <HTML> ou um elemento com uma ID seja encontrado.

    Por exemplo:

    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>

    Seletor: #container > ul.navigation(0) > li:nth-of-type(4)

No processo acima:

  • Você pode usar qualquer seletor de CSS, desde que ele identifique exclusivamente um elemento no DOM.
  • A abordagem acima é aquela usada por Target. Target não exige que você use esta abordagem. Você pode adicionar qualquer seletor, desde que o ponto 1 seja verdadeiro.
  • Você pode usar qualquer atributo no seletor. Este documento usa apenas um nome de classe como exemplo.
recommendation-more-help
3d9ad939-5908-4b30-aac1-a4ad253cd654