There are two ways to spot an element by its class:

  • Using the syntax:

    [class="classname"]

  • Using the syntax:

    .classname   (notice the prepended dot)

The two syntaxes are identical if the element has only one class attached to it:

<input class="onlyoneclassname">


However, if an element has more than one classes attached to it:

<input class="classname1 classname2 classname3">


in order to match this correctly use either .classname1.classname2.classname3 OR [class="classname1 classname2 classname3"]


You could also find the element using [class*="classname2"] - notice the asterisk * before the = sign which stands for "perform word-based matching inside the string". It means "class contains classname2"


Finally, another case we need to be aware of is when class names contain invalid characters as part of the classname:

<input class="some_invalid_characters_classname">

If we need somehow to match this element, then the [class*="classname"] syntax is the only available option:

 

Analysis:

Using [class="classname1"] or [class="classname3 classname1 classname2"] for the second example will result in zero elements getting matched

The reason behind this is that the [class="something"] syntax requires a complete match in order to work. This is why we either have to provide all the classes exactly as they are displayed or we have to resort to using the *= operator which performs word-based matching for the given substring.