A CSS selector is a way of specifying a UI element on a website. It could be an HTML element, class, or ID.
Elements are specified simply by there HTML name: “button”, “h1”, “div”, “a”
Classes need to be prefaced by a dot: .my-class
IDs, similarly, are prefaced by a hastag: #unique-id
Combine these types of selectors for increased specificity: button.check-out
If your HTML element looks like this:
<a href=”/checkout” class=”checkout”>Check out</a>
A valid CSS selector would be: .checkout
If your HTML element look like this:
<button id=”buy-now”>Buy now</button>
A valid CSS selector could be: button#buy-now
SplitWit use of CSS selectors
SplitWit uses CSS selectors to indicate click events for your A/B tests. SplitWit will track clicks on these elements, and use them to calculate which version of your experiment is more successful.
The SplitWit visual editor can also use CSS selectors. Enter a CSS selector in the “Make a change” section to highlight it. Alternatively, simply click on the element, and SplitWit will generate a valid CSS selector for you. The “Insert element” sections works in the same fashion.