Writing class selectors is very similar to IDs; in RapidSpike you enter the class name and select the “class” type. In our example:
<a href="https://example.com/another-page" class="link-to-another-page" id="anotherpage">Click me</a>
The class you’d enter is “link-to-another-page”.
Classes are far more common than IDs but are often less useful because they are not unique and can often result in matching multiple elements at the same time.
When looking at the HTML markup for your web page, you may notice that elements have a class attribute with multiple words in it – i.e. multiple classes.
<button class="red large call-to-action">Click me</button>
In this example, there are three classes: “red”, “large” and “call-to-action”. Any of the three could be used to match this button. However – we would advise caution because it is highly likely these classes are also in use elsewhere, possibly on other buttons, and would cause your User Journey to click on the wrong element. One solution is to use a combination of classes – i.e. by targeting all three classes together, it’s more likely that the selector will target a unique element.
Classes are important to understand because they are often your best way of writing CSS Selectors – which we will cover in a later lesson.