CSSセレクタで特殊文字を含んだ条件を使いたい

idにカンマなどの特殊な文字が含まれる要素をCSSセレクタで指定したい場合などの指定方法について
基本的には¥を付与すれば指定することができます。

HTMLタグ

.(カンマ)、@(アットマーク)、#(シャープ)の例

<div id="sample.tmp">idにカンマinfo Tech Developers</div>
<div id="sample@tmp">idにアットマークinfo Tech Developers</div>
<div id="sample#tmp">idにシャープinfo Tech Developers</div>

CSSセレクタの記述

<style>
#sample\.tmp {
    background-color: red;
}

#sample\@tmp {
    background-color: green;
}

#sample\#tmp {
    background-color: blue;
}
</style>

そもそも特殊な文字はあまり使わないというようにするのが良いと思いますが、他人が作ったものなどはどうしようもないですよね・・・
スクレイピングを行う場合などにも役立つので覚えておくと便利です！