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） が自動計算されて表示されます