こんにちは！フロントエンドの現場を長年フラフラと……いや、支えてきたチーフアーキテクトの私です。
CSSを書き始めた頃って、セレクタの多さにめまいがしませんか？「クラス？ID？子孫セレクタ？」と覚えるだけでもお腹いっぱいなのに、さらに「擬似クラス（偽物のクラス？）」なんて名前が出てくると、思わずブラウザをそっと閉じたくなる気持ち、痛いほどよく分かります。
でも、大丈夫ですよ。一つひとつ、身近な例えと一緒に紐解いていけば、CSSはあなたの最高の味方になってくれます。
今回は、そんな数ある擬似クラスの中から、ちょっと地味だけど実務ですごくいい仕事をしてくれる`:read-only（リードオンリー）`について、お話しさせてください。
—
そもそも `:read-only` ってどんな子？
名前を直訳すると「読み取り専用」。
つまり、「ユーザーが見ることはできるけれど、中身を書き換えたり編集したりできない状態の入力フォーム」をこっそり見つけて、スタイリングしてくれる優しいお巡りさんみたいなセレクタです。
身の回りのもので例えてみましょう。
- 通常のテキストボックス（``など）：
これは「自由に書き込める真っ白なノート」です。ユーザーはペンを持って、好きな文字を書き込めますよね。
- `:read-only` がつく要素（`readonly`属性がついた入力欄など）：
これは博物館のガラスケースの中に飾られた「開けないでね」と書いてある古い日記帳です。中身は読めるけれど、ペンのインクが裏に移っちゃうから触っちゃダメ、という状態です。
Webサイトで言うと、会員登録の確認画面で「あなたのメールアドレス（変更不可）」がグレーアウトして表示されている、あんな場面でよく使われています。
なんでわざわざスタイルを変える必要があるの？
「触れないなら、普通のテキストと見た目が一緒でもいいんじゃない？」って思いませんでしたか？
ここが、私たちフロントエンドエンジニアのこだわりどころなんです。
もし、編集できるところとできないところの見た目が全く同じだったらどうでしょう？ ユーザーは「あれ？ ここクリックしてもキーボードが出てこない！ バグかな？」とイライラしてしまいますよね。
だからこそ、`:read-only` を使って「あ、ここは見る専用なんだな」と一目で分かるように見た目を優しく変えてあげることが、思いやりのあるWebデザインにつながるんです。
—
具体的にどんな要素に反応するの？
実は `:read-only` がターゲットにするのは、お行儀よく `readonly` 属性がついている要素だけではありません。
1. `readonly` 属性がついている `` や `