HTMLのclass属性は、CSSやJavaScriptで要素をターゲットにするための重要な手段です。複数のクラス名を持つ要素の場合、class=\"foo bar\"のようになります。
しかし、このような複数のクラス名を持つ要素をターゲットにする際には、属性セレクタの前方一致(^=)や後方一致($=)を使用すると予期しない挙動を引き起こすことがあります。
たとえば、[class^=bar]とすると、「class属性の値が\”bar\”で始まる」要素を選択しようとします。しかし、\”foo bar\”のような値では、\”bar\”は最初のクラスではないため、このセレクタはヒットしません。
このように、複数のクラス名を持つ要素をターゲットにする際には、属性セレクタの前方一致や後方一致を使用するのではなく、クラスセレクタ.classnameを使用することを推奨します。