Element Selectors Used in the Visual Experience Composer
- Topics:
- Visual Experience Composer (VEC)
An element selector is a CSS expression which can identify one or more elements.
You can find basic information about CSS selectors in the Selectors document on the Mozilla Developer Network (MDN).
You can set whether to use element classed or element IDs in your account preferences. Click Administration > Visual Experience Composer, then choose your preferred CSS selectors.
For information about when to use CSS selectors and when to use unique IDs, see Visual Experience Composer Best Practices and Limitations.
How Adobe Target Generates a Selector for an Element
Target uses a simple algorithm to create a selector. Here is very brief explanation of the generation logic:
-
If an element has an id, for example
id="container"
, then the selector for the element is#container
.For Example:
<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>
-
If an element contains a class attribute, Target attempts to leverage the first class of any classes present on the element.
Target attempts to parse the parent element until it finds the
<HTML>
element or an element with an id. Whenever an element contains an id and the selector is computed on its descendant child, this element’s id contributes to the selector.For example:
<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 this example:
Selector:
#container
>ul.navigation:eq(0)
>li.item:eq(0)
(" > " indicates the immediate child.)eq
tells the index there’s an element that has “tagName=UL” and the first class isnavigation
. Therefore,index
is 0. See the Selectors article in MDN for more information. -
If an element does not contain a class, Target uses
tagName
for the element and traverses up the parent element until either the<HTML>
element or an element with an id is found.For example:
<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>
Selector:
#container
>ul.navigation(0)
>li:nth-of-type(4)
In the above process:
- You can use any CSS selector as long as it uniquely identifies an element in the DOM.
- The approach above is the one used by Target. Target does not mandate that you use this approach. You can add any selector as long as point #1 is true.
- You can use any attribute in the selector. This document only uses class name as an example.
Target
- Adobe Target Business Practitioner Guide Home
- Target release notes
- Introduction
- Introduction to Target
- Access Target from the Adobe Experience Cloud
- Target key concepts
- Understand the Target UI
- Adobe Target welcome kit
- Target welcome kit overview
- Chapter 1: Introduction
- Chapter 2: Target at a glance
- Chapter 3: Develop your testing and personalization ideas
- Chapter 4: Tips for using Target
- Chapter 5: Inspiration for testing and personalization activities
- Chapter 6: Easily avoidable pitfalls
- Chapter 7: Create and run your first Target activity
- Chapter 8: Communicate your activity results
- Chapter 9: Next steps and resources
- Glossary
- How Target works
- Training and certification
- Training videos for Target Standard and Premium
- Target optimization and personalization FAQ
- Administer Target
- Implement Target
- Integrate Target with the Experience Cloud
- Adobe Analytics as the reporting source for Target (A4T)
- A4T overview
- Before you implement
- Analytics for Target implementation
- User permission requirements
- Create an activity that uses Analytics as the reporting source
- A4T support for Auto-Allocate and Auto-Target activities
- Use an Analytics tracking server
- A4T reporting
- Troubleshooting the Analytics and Target integration (A4T)
- A4T Frequently Asked Questions
- Expected data variances between Target and Analytics when using and not using A4T
- Integrate Target with Adobe Customer Journey Analytics
- Integrate Target with Adobe Journey Optimizer (AJO)
- Experience Cloud Audiences
- Integrate Target with Adobe Experience Manager (AEM)
- Integrate Target with Adobe Audience Manager (AAM)
- Integrate with Real-time Customer Data Platform
- Integrate Target with Adobe Campaign
- Adobe Analytics as the reporting source for Target (A4T)
- Activities
- Activities overview
- Target activity types
- A/B Test
- Auto-Allocate
- Auto-Target
- Automated Personalization
- Automated Personalization overview
- Random Forest Algorithm
- Create an Automated Personalization activity
- Upload data for the Target personalization algorithms
- Data collection for the Target personalization algorithms
- Estimate the traffic required for success
- Preview experiences for an Automated Personalization test
- Target Automated Personalization offers
- Manage exclusions
- Offer reporting groups in Automated Personalization
- Select the control for your Automated Personalization or Auto-Target activity
- Automated Personalization FAQ
- Troubleshoot Automated Personalization
- Experience Targeting
- Multivariate Test
- Recommendations activity
- Edit an activity or save as draft
- Priority
- Activity settings
- Success metrics
- Activity change log
- Troubleshoot activities
- Activity QA
- Audiences
- Experiences and offers
- Experiences and offers overview
- Visual Experience Composer (VEC)
- Visual Experience Composer overview
- Visual Experience Composer options
- Visual Experience Composer changes
- Include the same experience on similar pages
- Multipage activity
- Activity collisions
- Modifications
- Element selectors used in the Visual Experience Composer
- Mobile viewports for responsive experiences
- Visual Experience Composer best practices and limitations
- Troubleshooting the Visual Experience Composer
- Troubleshooting the Visual Experience Composer overview
- Troubleshooting the Visual Experience Composer and Enhanced Experience Composer
- Troubleshooting the Visual Experience Composer
- Troubleshooting the Enhanced Experience Composer
- Enabling mixed content in your browser
- Page modification scenarios
- Visual Editing Helper extension
- Visual Experience Composer helper extension
- Redirect to a URL
- Creating carousels that work in the Visual Experience Composer
- Form-Based Experience Composer
- Single Page App (SPA) Visual Experience Composer
- Offers
- Reports
- Recommendations
- Recommendations overview
- Introduction to Recommendations
- Plan and implement Recommendations
- Entities
- Criteria
- Criteria overview
- Create criteria
- Create criteria sequences
- Base the recommendation on a recommendation key
- The science behind Target’s recommendations algorithms
- Upload custom criteria
- Dynamic and static inclusion rules
- Use a backup recommendation
- Work with multi-value attributes
- Use Adobe Analytics with Recommendations
- Design
- Activity
- Recommendations as an offer
- Frequently asked questions
- Recommendations Classic documentation
- Troubleshoot Target
- Target APIs
- Resources and contact information
Adobe Target Maturity Webinar Series
Adobe Customer Success Webinars
Tuesday, Feb 4, 4:00 PM UTC
Adobe Target innovations, including GenAI, and best practices on AI-powered personalization and experimentation at scale.
Register