data属性のうち特定の値を持たない要素のみを対象にする

jQueryを使って、特定のdata属性のうち特定の値を持たない要素にclassを付けるという処理を実装していたのですが、その際に意図しない挙動になることがあったので、備忘録としてメモしておきます。

サンプルコード

例えば以下のようなHTMLがあるとして、data-charaの値が特定のものでない要素に.is-hideを付けるようにしてみます。

<ul>
	<li data-chara="hana">白咲 花</li>
	<li data-chara="hinata">星野 ひなた</li>
	<li data-chara="noa">姫坂 乃愛</li>
	<li data-chara="koyori">種村 小依</li>
	<li data-chara="kanon">小之森 夏音</li>
</ul>

.is-hide付与で非表示になるようにします。

.is-hide {
	display: none;
}

jQueryは以下の内容です。
「!=」で値が「hinata」以外の要素にしています。

$(function() {
	$('[data-chara != hinata]').addClass('is-hide');
});

これで「星野 ひなた」と表示されるはずだったのですが、試してみると何も表示されませんでした。
うまくいかなかった場合のデモページ
デベロッパーツールで確認してみると、data-charaの設定された要素のみでなく全ての要素に.is-hideが付与されているようでした。

前の設定だと「data-charaの値がhinataではない全ての要素」となってしまっていたので、「data-charaを持つ要素のうち、data-charaの値がhinataではない全ての要素」となるようにしてみます。

$(function() {
	$('[data-chara][data-chara != hinata]').addClass('is-hide');
});

これで意図した挙動になりました。
変更後のデモページ