E[foo~="bar"]

"foo"というアトリビュートの値がスペースで区切られた値のリストであり、そのひとつが厳密に"bar"と等しい E というエレメント

このページでは class の値が スペースで区切られてた複数の単語からなる場合に応用します。

class の値にworldが含まれていれば青い文字に、japanが含まれていれば赤になるように、riverが含まれていれば背景が水色に、mountainが含まれていれば背景が緑になるように指定しています。

p[class ~= "world"] { color:#0000ff; }
p[class ~= "japan"] { color:#ff0000; }
p[class ~= "river"] { background-color:#ccffff; }
p[class ~= "mountain"] { background-color:#eeffee; }

プログラムでは ~= には「含まれる」という意味があります。

長江は中国の川です。(p class="world river")

マッターホルンはスイスの山です。(p class="world mountain")

大井川は日本の川です。(p class="japan river")

富士山は日本の山です。(p class="japan mountain")

十和田湖は日本の湖です。(p class="japan") riverもmountainもないので背景色はありません

ミシシッピはアメリカ合衆国の川です。(p class="world river")

岩木川は日本の川です。(p class="japan river")

キリマンジャロはタンザニアにある山です。(p class="world mountain")

オリンポス山は火星ある山です。(p class="mountain") worldもjapanも無いので色は黒のままです。