Categories
Technology

What is a CSS selector?

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

CSS selectors
Use CSS selectors to specify parts of your webpage.

Examples:

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.

Click event metrics
Measure clicks on your website.

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.

The visual editor uses CSS selectors
SplitWit uses CSS selectors to specify UI elements