The HTML class attribute is an important means of targeting elements in CSS and JavaScript. For elements with multiple class names, this would be class="foo bar".
However, using forward matching (^= ) or backward matching ($= ) in attribute selectors can cause unexpected behavior when targeting elements with multiple class names like this.
For example, [class^=bar] would attempt to select elements whose class attribute value begins with “bar”. However, with a value like “foo bar”, this selector will not hit, because “bar” is not the first class.
Thus, when targeting elements with multiple class names, it is recommended to use the class selector .classname instead of using the attribute selector forward or backward matching.