data-*属性をCSSのクラスリストのように使う方法

https://developer.mozilla.org/ja/docs/Web/CSS/Attribute_selectors
> [attr~=value]
> attr という名前の属性の値が空白区切りの語のリストで、その中の1つが正確に value と一致する要素を表します。

↑属性セレクタとしてこれがあるからできるんじゃないかと思ってみたら、
やっぱりできるもんだなぁ。data-*属性でhasClass相当ってこれでいいでしょ？

https://jsfiddle.net/s9epbv2k/
-------- html
<ul>
　<li data-test="foo bar">1</li>
　<li data-test="foo bar baz">2</li>
　<li data-test="foo baz bar">3</li>
　<li data-test="baz foo bar">4</li>
</ul>

-------- css
[data-test~="baz"] {
color: red;
}

-------- js
$('[data-test~="baz"]').on('click', function() {
　alert($(this).text())
})
$('li').on('click', function() {
　alert($(this).is('[data-test~="baz"]'));
})