ライブテスター付きCSSセレクターチートシート

CSSセレクターのテスターとチートシート

CSSセレクターチートシート：ライブテスター、nth-child、::before | We.Inc

CSSセレクターを入力すると、サンプルページでどの要素に一致するかを詳細度とともに確認できます。すべてのセレクターの分類、nth-childの数式計算ツール、::beforeと::afterのレシピ、:has()も紹介します。

セレクターは、CSSのルールをどの要素に適用するかを指定するものです。基本となるのは、タイプ（p）、クラス（.card）、ID（#main）、属性（[type=email]）、結合子（子孫のスペース、子の>、兄弟の+と~）、:hoverや:nth-child(2n)などの疑似クラス、そして::beforeなどの疑似要素です。下にセレクターを入力すると、何に一致するかを確認できます。

ほとんどのスタイルシートで使われるセレクター

セレクター
一致するもの
詳細度

すべてのp要素

.card
cardクラスを持つ要素

idがmainの要素

nav a
nav内のどこかにあるa

ul > li
ulの直接の子であるli

a:hover
ポインターが乗っているリンク

セレクターの表を読むだけでは限界があります。下のテスターは、入力したセレクターをブラウザー自身のエンジンで小さなサンプルページに対して実行し、一致するすべての要素をハイライトし、無効な入力を説明し、詳細度を計算します。その下の計算ツールは、3n+1が実際にどの項目を選ぶのかという永遠の疑問に答えます。

テスターにセレクターを入力するか、例の1つをクリックして読み込みます。
サンプルページで一致する要素が光り、入力に合わせて件数が更新されます。
詳細度のスコアは3つの数値として読みます：ID、次にクラスなど、最後に要素のタイプです。
nth-childの計算ツールで、任意のAn+Bの数式を最大30項目のリストに対して試せます。

スタイルはIDではなくクラスで指定しましょう。クラスなら詳細度が低く保たれ、後のルールやユーティリティクラスで上書きできます。
フォーカスリングには:focusではなく:focus-visibleを使いましょう。キーボードの利用者にはリングを表示しつつ、マウスでクリックするたびに点滅させずに済みます。
::beforeと::afterには、空文字列でもよいのでcontentプロパティが必要です。ないと、そもそも生成されません。
長いセレクターリストは:is()で囲むと短くなります。詳細度をゼロにしたい場合は:where()で囲みましょう。

よくある質問

nth-childとnth-of-typeの違いは？

:nth-child(2)はすべての兄弟要素を数え、2番目の要素がセレクターの残りの部分にも一致するかを確認します。:nth-of-type(2)は同じタグの兄弟要素だけを数えます。そのため、2番目の子がh2ならp:nth-child(2)は何にも一致しませんが、p:nth-of-type(2)は2番目の段落を見つけます。

::beforeと:beforeの違いは？

どちらも同じ疑似要素です。コロン2つの書き方は、疑似要素と疑似クラスを区別するために導入されたもので、ブラウザーは後方互換性のため、古い4つ（before、after、first-line、first-letter）についてはコロン1つも受け付けています。新しいコードではコロン2つで書きましょう。

:has()は何をするものですか？

:has()は、要素が何を含んでいるか、またはその後に何が続くかに基づいて要素に一致します。たとえば.card:has(img)は画像を含むカードに、label:has(+ input:invalid)は無効な入力欄の前にあるラベルにスタイルを適用します。現在の主要ブラウザーすべてで対応しており、最後に対応したのは2023年末のFirefoxです。

詳細度はどのように計算されますか？

3つのものを数えます：IDセレクター、クラス・属性セレクター・疑似クラス、そしてタイプセレクターと疑似要素です。左から比較するので、IDが1つあればクラスがいくつあっても勝ちます。:where()は何も加えませんが、:is()、:not()、:has()は引数の中で最も詳細度の高いもののスコアを取ります。インラインスタイルと!importantは、これらすべてより上に位置します。

スマートフォンで:hoverのスタイルが表示されないのはなぜですか？

タッチスクリーンにはホバー状態がないため、ブラウザーはそれを省略するか、タップ後に一瞬だけ適用します。ホバー専用のスタイルは@media (hover: hover)で囲み、ホバーで表示される内容がタップやキーボードでも利用できるようにしましょう。

ブラウザーがセレクターを読む仕組み

ブラウザーはセレクターを右から左へ照合します。nav ul li aの場合、エンジンはページ上のすべてのリンクから始め、上へたどってli、ul、navがあるかを確認します。そのため、キーセレクターと呼ばれる一番右の部分が速度に最も影響します。ただし、通常のページでセレクターの速度が実際に問題になることはほとんどありません。
カンマを使うとセレクターリストになり、これは複数のセレクターが1つのルールを共有しているだけです。どれか1つでも無効なら、ルール全体が破棄されます。ただし:is()と:where()の中は例外で、無効な項目があっても許容されます。

疑似クラスと疑似要素の違い

コロン1つで書く疑似クラスは、特定の状態や位置にある既存の要素を選択します：:hover、:checked、:first-child、:emptyなどです。コロン2つで書く疑似要素は、HTML上で独立した要素ではない部分を作成または対象にします：::before、::placeholder、::selection、::markerなどです。
疑似要素は1つの複合セレクターにつき1つだけで、最後に書く必要があります。::beforeや::afterで追加した内容は、通常スクリーンリーダーで読み上げられますが、選択やコピーはできないので、重要な情報はそこに入れないようにしましょう。

詳細度をコントロールする

詳細度の争いの多くは、IDや長くネストしたセレクターの連鎖が、後に書いたシンプルなルールに勝ってしまうことから始まります。フラットなクラス名を使い、ネストは多くても1〜2階層にとどめれば、どのルールも簡単に上書きできます。
カスケードレイヤー（@layer）という手段もあります。後のレイヤーのルールは、詳細度に関係なく前のレイヤーのルールに勝ちます。リセットやサードパーティのスタイルを低いレイヤーに置けば、自分のクラスが常に勝つようになります。

基本セレクターと属性セレクター

単純セレクター

セレクター
例
一致するもの

すべての要素

タイプ
すべてのbutton要素

クラス
.price
classにpriceが含まれる

ID
idがcheckout

属性がある
[disabled]
その属性を持っている

完全一致
[type="email"]
値がemailと完全に一致する

前方一致
[href^="https"]
値がhttpsで始まる

後方一致
[href$=".pdf"]
値が.pdfで終わる

部分一致
[class*="btn"]
値のどこかにbtnが含まれる

リスト内の単語
[rel~="noopener"]
スペース区切りのリストにその単語が含まれる

言語の接頭辞
[lang|="en"]
enまたはen-で始まる値

大文字と小文字を区別しない
[href$=".PDF" i]
.pdf、.PDFなどに一致する

結合子

要素同士の関係

結合子
例
一致するもの

子孫（スペース）
nav a
nav内の任意の深さにあるa

子 >
ul > li
ulの直下にあるli

隣接兄弟 +
h2の直後にあるp

後続兄弟 ~
同じ親を持ち、h2より後にあるすべてのp

セレクターリスト ,
どちらか一方

疑似クラス

状態、構造、論理

疑似クラス
一致するもの

:hover
マウスポインターが乗っている

:focus
キーボードまたはプログラムによるフォーカスがある

:focus-visible
フォーカスがあり、ブラウザーがリングを表示すべきと判断している

:focus-within
自身または子孫にフォーカスがある

:active
押されている最中

:visited
訪問済みのリンク（プライバシー保護のためスタイルは限定的）

:checked / :disabled / :required
その状態にあるフォームコントロール

:valid / :invalid / :user-invalid
フォームの検証状態。user-invalidはユーザーの操作を待つ

:placeholder-shown
現在プレースホルダーを表示している入力欄

:first-child / :last-child / :only-child
兄弟要素の中での位置

:nth-child(An+B) / :nth-last-child()
すべての兄弟要素を数えた、数式による位置

:nth-of-type() / :first-of-type
同じタグだけを数えた位置

:empty
子要素もテキストもない

:not(x)
xに一致しない

:is(x, y) / :where(x, y)
リスト内のいずれかに一致する。whereは詳細度がゼロ

:has(x)
xに一致するものを含む、または後に続く

:root
html要素

:target
URLのハッシュにidが含まれている要素

疑似要素と::before / ::afterのレシピ

要素の一部分

疑似要素
対象

::before / ::after
要素の内容の前または後に生成されるコンテンツ

::first-letter / ::first-line
ブロックの最初の1文字、または最初に表示される1行

::placeholder
入力欄のプレースホルダーテキスト

::selection
ユーザーが選択したテキスト

::marker
リスト項目の行頭記号や番号

::file-selector-button
ファイル入力のボタン

::backdrop
モーダルダイアログやフルスクリーン要素の背後にあるレイヤー

必須マーク、外部リンクのアイコン、引用符

それぞれの装飾はCSSの中にあるので、HTMLはすっきりしたままです。どちらの疑似要素にもcontentが必要です。

:hover、:focus-visible、:has()の組み合わせ

Tabキーで入力欄に移動するとリングが表示されます。カードは、無効なメールアドレスが入力されている間だけ赤くなります。

ホーム

提携サイト

メニュー

旬の料理を毎週入れ替えています。

アレルギー物質についてはお尋ねください。

スープ
サラダ
リゾット
タルト
コーヒー

名前

メモ

セレクターテスター

セレクター

セレクターの例

このブラウザーでは有効なセレクターではありません。

{n}個の要素が一致

詳細度はID、クラス、タイプの順に読みます。3番目の項目「リゾット」にはfeaturedクラスがあり、最初の段落のidはintroです。

nth-child計算ツール

:nth-child( )の中の数式

項目数：{n}

数式の例

2n+1、-n+3、odd、even、または単一の数値のような形式で入力します。

一致する項目：{list}

このリストで一致する項目はありません

項目

無料で始める · クレジットカード不要

製品

AI ホームページ作成ツール：作りたいサイトを普段の言葉で伝えるだけで、数分で公開
ホワイトラベルプラットフォーム：自社ブランド、自社ドメイン、自社の利益で運営
エンタープライズ：SSO、個別の SLA、専任サポート
開発者向け API：自社の SaaS にサイト生成機能を組み込み

ご利用いただける方

制作会社・代理店向け：自社ブランドで再販
フリーランス向け：自分ブランドのビルダーを持つ
ホスティング事業者向け：サービスにビルダーを追加
SaaS プラットフォーム向け：API でサイト作成を組み込み
スタートアップ向け
金融サービス向け
医療・ヘルスケア向け

機能

リソース

会社情報

サイトマップを見る

ライブテスター付きCSSセレクター チートシート