CSSセレクタ ビジュアライザー
セレクタを入力すると、マッチする要素がリアルタイムでハイライトされます。specificity（詳細度）表示付き。
プリセット
詳細度（specificity）
セレクタを入力すると表示されます
0ID
0クラス
0要素
マッチした要素
セレクタを入力してください
HTML ツリープレビュー
<div id="main">
<h1>タイトル
<p>最初の段落
<p>2番目の段落
<ul>
<li>リスト項目1
<li>リスト項目2
<li>リスト項目3
</ul>
<div class="card">
<p>カードの説明
<a href="#">リンクテキスト
<button class="btn primary">送信
<button class="btn secondary">キャンセル
</div>
<form>
<input type="text" placeholder="テキスト" />
<input type="email" placeholder="メール" />
</form>
</div>
使い方
- 上の入力欄に CSSセレクタ（例:
.btn、#main）を入力しよう - 右のHTMLツリーで teal枠 がついた要素がマッチした要素です
- 下の プリセット ボタンをクリックするとよく使うセレクタをすぐ試せます
- 詳細度（specificity） が自動計算されて表示されます
「セレクタを書いたのにスタイルが当たらない」問題
CSSセレクタは「どの要素にスタイルを適用するか」を指定する仕組み。 でも書いたつもりのセレクタが実は別の要素を指していたり、そもそもどこにも当たっていなかったりすることがある。 開発者ツールで確認する方法もあるけど、初心者には敷居が高い。
このビジュアライザーにセレクタを入力すれば、HTMLツリー上で「どの要素にマッチしているか」が teal 枠で即座に表示される。 「あ、ここに当たってたのか」「ここには当たってないのか」が目で確認できる。
授業や制作で役立つ場面
- 情報の授業で nth-child を学ぶとき —
:nth-child(odd)と入力すれば奇数番目がハイライトされる。「2n+1 って何？」が視覚的に解決。 - JavaScriptの querySelector を書く前に — DOM操作で使うセレクタが正しいか、このツールで事前確認。null が返ってくるバグを防げる。
- チーム開発でCSS命名規則を確認 — BEM記法（
.block__element--modifier）のセレクタが意図通りに当たっているか検証。
セレクタが「当たらない」ときの確認ポイント
- クラス名のスペルミス — HTML側が
class="btn-primary"なのに CSS側で.btn_primaryと書いていないか。ハイフンとアンダースコアは別物。 - 親子関係の間違い —
.nav > a（直接の子）と.nav a（子孫全部）は範囲が違う。このツールで実際にどこに当たるか確認しよう。 - 詳細度で負けている — セレクタは正しいのにスタイルが効かないなら、別のセレクタに詳細度で負けている可能性。Specificity計算機で比較しよう。
よくある質問
- Q. querySelector と CSS セレクタは同じ書き方？
- 同じ。JavaScriptの
document.querySelector('.nav > a')は CSS と全く同じセレクタ構文を使う。このツールで練習すれば JS の DOM 操作にも直結する。 - Q. :nth-child(2n+1) の意味が分からない
- 「奇数番目の要素」を選ぶ。2n は「2の倍数ごと」、+1 は「1番目から開始」。このツールに入力すれば、どの要素がハイライトされるか一目で分かる。