対応しているブラウザは？

Chrome、Safari、Firefox、Edgeなど主要モダンブラウザの最新版で動作確認しています。Internet Explorerや極端に古いバージョンは対象外です。

入力したデータはサーバーに送信されますか？

いいえ。CSSセレクタ参照はすべての処理をお使いのブラウザ内で完結させます。入力内容がサーバーに送信されたり保存されたりすることはありません。

デザイン・CSS無料登録不要

CSSセレクタ参照

CSSセレクタの一覧と優先度。基本からnth-child等の擬似クラスまで網羅した無料オンラインツール。

入力

結果

--- 基本 ---
*              全要素
.class         クラス
#id            ID
element        要素名
[attr]         属性あり
[attr=val]     属性値一致
[attr~=val]    空白区切りで含む
[attr^=val]    先頭一致
[attr$=val]    末尾一致
[attr*=val]    部分一致

--- 結合子 ---
A B            子孫
A > B          直接の子
A + B          隣接兄弟
A ~ B          一般兄弟

--- 擬似クラス ---
:hover         ホバー時
:focus         フォーカス時
:active        アクティブ時
:first-child   最初の子
:last-child    最後の子
:nth-child(n)  N番目
:not(sel)      否定
:has(sel)      子を持つ (CSS4)
:is(sel)       いずれか
:where(sel)    いずれか(詳細度0)

--- 擬似要素 ---
::before       要素の前
::after        要素の後
::placeholder  プレースホルダー
::selection    選択部分

FAQ

よくある質問

CSSセレクタ参照の出力はChrome、Safari、Firefox、Edgeの最新版で動作します。古いブラウザ対応が必要な場合はCaniuse.comで各プロパティの対応状況を確認してください。

こちらもおすすめ

CSSプロパティ辞典

CSSの主要プロパティの一覧とカテゴリ別分類を表示する無料オンラインツール。CSSプロパティ辞典をブラウザ上で即座に実行でき、デザイン・CSSとして登録不要で利用できます。

CSS角度単位

CSS角度単位を表示する無料オンラインツール。CSS角度単位をブラウザ上で即座に実行でき、デザイン・CSSとして登録不要で利用できます。

animation-direction

animation-directionを表示する無料オンラインツール。animation-directionをブラウザ上で即座に実行でき、デザイン・CSSとして登録不要で利用できます。

animation-fill-mode

animation-fill-modeを表示する無料オンラインツール。animation-fill-modeをブラウザ上で即座に実行でき、デザイン・CSSとして登録不要で利用できます。

border-radiusジェネレーター

CSSのborder-radiusをGUIで視覚的に調整。4隅個別・楕円形の角丸にも対応。コードをコピーしてすぐ使える無料オンラインツール。

Box Shadow生成

CSS box-shadowをGUIで直感的に作成。多重シャドウ、ニューモーフィズム、テキストシャドウにも対応。コード即コピーの無料ツール。

読み込み中...