【逆引き・検索OK】CSSセレクター / 疑似クラス一覧早見表（辞典、リファレンス）

※この記事は 5 分程度でお読みいただけます。

早見表シリーズ第二弾は、CSSのセレクター指定方法と、疑似クラスの一覧です（使用頻度が低いもの、非推奨、実験的なものは省いています）。並べ替えやフリーワード検索も可能です。コーディングの学習に、忘れたときの見直し用に、ご自由にお使いください！

概要欄に解説があるものは、使い方のサンプルを紹介していますので、ぜひご覧ください。こんな指定方法があったのか！と驚く指定方法がたくさんあります。

あわせてこちらもお読みください！

• HTMLタグ / CSSプロパティ一覧早見表
• 疑似要素の使い方
• CSSを使いこなすポイント9選

名称・疑似クラス名からは、WEB開発者向けサイト「MDN」の詳細ページへリンクしています。詳しい指定方法などをお知りになりたい方は「MDN」にてご確認ください。

CSSセレクター / 疑似クラス一覧早見表

まずは「基本」のCSSセレクター指定方法

まずは基本的なセレクターの指定方法をご紹介します。このあたりは必須です！

すべてのタグに「全称セレクター」

すべてのタグに一括で指定できる全称セレクターです。リセットCSSなどでよく使われます。子孫結合子や子結合子と組み合わせることも可能です。

* {
  /* すべてのタグに対しての指定 */
}
.name * {
  /* クラス名「name」の子孫要素すべて（すべてのHTMLタグ）に対しての指定 */
}

HTMLタグ名で直接「要素型セレクター」

HTMLタグで指定できる要素型セレクターです。すべてのタグに指定が効いてしまうので、あまり乱用はせず、WEBサイト全体で共通するスタイルやリセットCSS、他の結合子や疑似クラスと組み合わせて、用途を限定して使ってください。

p {
  /* すべての「p」に対しての指定 */
}

クラス名をつければ何でもOK「クラスセレクター」

もっともよく使われるクラスセレクターです。HTMLタグに指定したクラス名を使って、CSSのスタイルを設定します。クラス名は、同じページのHTML内で何度も繰り返し使うことができます。また、1つのHTMLタグに、半角スペースで区切って複数のクラス名を指定することも可能です。

<p class="name1">
  <!-- クラス名「name1」の指定が適用 -->
</p>
<p class="name1 name2">
  <!-- クラス名「name1」と「name1」の両方の指定が適用 -->
</p>

.name1 {
  /* クラス名「name1」に対しての指定 */
}
.name2 {
  /* クラス名「name2」に対しての指定 */
}

ID名も使えます「IDセレクター」

HTMLタグに指定したID名を使うIDセレクターです。ID名でもクラス名と同様にCSSの指定ができますが、同じID名は1ページで1回しか使えないという厳格な規則があるため、同じ指定を繰り返すことはできません。また、詳細度（詳しくはこちら）も高く、メンテナンス性が著しく低くなるため、CSSのスタイル目的で使うのは避けるようにしてください。

<section id="name">
  <!-- ID名「name」のコンテンツ -->
</section>

#name {
  /* ID名「name」に対しての指定 */
}

複数指定OK！タグやクラス名、ID名をさらに限定「複合セレクター」

複数の条件を組み合わせて使える複合セレクターです。セレクターに半角スペースを開けず、連結して指定することで、すべての条件が対象の時にだけスタイルが適用されます。

.name1.name2 {
  /* クラス名「name1」と「name2」が両方指定されている時 */
}
p.name3 {
  /* 「p」にクラス名「name3」が指定されている時 */
}
#name4.name5 {
  /* ID名「name4」とクラス名「name5」が両方指定されている時 */
}

けっこう使える「属性セレクター」

HTMLタグに特定の属性が指定されている時に使える属性セレクターです。「target="_blank"」や「type="text"」など、属性によってスタイルを変更することができます。属性セレクターの指定方法について、詳しくはMDN「属性セレクター」をご覧ください。

a[target="_blank"] {
  /* 「a」に属性「target="_blank"」が指定されている時 */
}
a[href^="#"] {
  /* 「a」の属性「href」に「#」で始まる文字列が指定されている時（ページ内リンク） */
}
a[title] {
  /* 「a」に属性「title」が何かしら指定されている時 */
}
input[type="text"] {
    /* 「input」に属性「type="text"」が指定されている時 */
}

同じ指定はぜんぶまとめて「セレクターリスト」

異なるセレクターに同じ指定をまとめてできるセレクターリストです。各セレクターを「,（カンマ）」で区切って指定します。同じ指定を何度も繰り返すのではなく、できるだけまとめて指定するようにしましょう。

.name1,
.name2 {
  /* クラス名「name1」と「name2」両方に指定 */
}

CSSをすっきり見やすく「入れ子セレクター」

2023年ごろにすべての主要なブラウザで使えるようになった新しい指定方法の入れ子セレクターです。子孫結合子や複合セレクターなどが、すっきり見やすく指定できます。下の①～③は、すべて同じ要素に対する指定です。

<dl class="list">
  <dt>見出し1</dt>
  <dd>内容1</dd>
  <dt>見出し2</dt>
  <dd>内容2</dd>
</dl>

/* ---- ① 子孫セレクターを使った指定方法 ---- */
.list {
  /* クラス名「list」に対する指定 */
}
.list dt {
  /* クラス名「list」の子孫要素「dt」に対する指定 */
}
.list dd {
  /* クラス名「list」の子孫要素「dd」に対する指定 */
}

/* ---- ② 入れ子セレクターを使った指定方法 ---- */
.list {
  /* クラス名「list」に対する指定 */
  & dt {
    /* クラス名「list」の子孫要素「dt」に対する指定 */
  }
  & dd {
    /* クラス名「list」の子孫要素「dd」に対する指定 */
  }
}

/* ---- ③ 入れ子セレクターを使った指定方法 ---- */
.list {
  /* クラス名「list」に対する指定 */
  dt {
    /* クラス名「list」の子孫要素「dt」に対する指定（「&」は省略可能） */
  }
  dd {
    /* クラス名「list」の子孫要素「dd」に対する指定（「&」は省略可能） */
  }
}

CSSを入れ子にすることで、どの要素の子孫要素なのかが、はっきりと分かりやすくなります。さらに、「&」の後に半角スペースを入れずに連結すると、複合セレクターや疑似クラスの指定もできます。これも①と②はまったく同じ要素に対しての指定です。

/* ---- ① 子孫セレクターを使った指定方法 ---- */
a {
  /* 「a」に対する指定 */
}
a:hover {
  /* 「a」のマウスオーバー時（hover）の指定 */
}
a:active {
  /* 「a」のクリック時（active）の指定 */
}

/* ---- ② 入れ子セレクターを使った指定方法 ---- */
a {
  /* 「a」に対する指定 */
  &:hover {
    /* 「a」のマウスオーバー時（hover）の指定 */
  }
  &:active {
    /* 「a」のクリック時（active）の指定 */
  }
}

はじめのうちは、クラス名を個別に指定したほうが分かりやすいかもしれませんが、入れ子セレクターを使うと、CSSがかなり分かりやすく見やすくなります。CSSに慣れてきたタイミングで、ぜひ挑戦してみてください。入れ子セレクターの指定方法について、詳しくはMDN「入れ子セレクター」をご覧ください。

クラス名がすっきり「結合子」を使った指定方法

指定した箇所からの位置を特定できる結合子です。これもよく使います。サンプルでは赤背景の指定箇所の部分に指定、スタイルが効いている要素は赤枠・黄色背景がつきます。どこに指定するとどこが対象になるかに注意して、確認してください。

子供も孫も子孫はぜんぶ「子孫結合子」

指定した箇所のすべての子孫要素が対象になります。

See the Pen Untitled by Matsuyama (@nakanaka-design) on CodePen.

直の子供だけに効かせたい「子結合子」

指定した箇所の直下にある子要素のみ対象になります。孫要素には指定は効きません。

See the Pen 2015_02 by Matsuyama (@nakanaka-design) on CodePen.

一番近い弟妹だけ「次兄弟結合子」

指定した箇所の次の兄弟要素のみ対象になります。Aの直後に出てきたB（A + B）という考え方になります。

See the Pen 2015_03 by Matsuyama (@nakanaka-design) on CodePen.

弟妹ぜんぶまとめて「後続兄弟結合子」

指定した箇所の後にでてくるすべての兄弟要素が対象になります。

See the Pen 2015_04 by Matsuyama (@nakanaka-design) on CodePen.

ホバー・リンク系の「疑似クラス」

マウスオーバー時など、ユーザーのアクションに応じたスタイルの指定方法です。

マウスオーバー（ホバー）時［:hover］ 

マウスオーバー時（ホバー時）の指定です。これは、必ずといっていいほど使用します。リンクを設定する「a」だけではなく、「div」や「li」など他のHTMLタグにも指定できます。ホバー時に変更したいスタイル、追加したいスタイルだけを、指定するようにしてください。なお、スマートフォンなどのタッチデバイスの場合は、そもそもマウスオーバーという概念はありません。

a {
  /* 「a」の通常のスタイル */
}
a:hover {
  /* 「a」のマウスオーバー時（ホバー時）のスタイル */
}

.name {
  /* クラス名「name」の通常のスタイル */
}
.name:hover {
  /* クラス名「name」のマウスオーバー時（ホバー時）のスタイル */
}

その他のリンク系［:active / :link / :visited］

ホバー時だけでなく、マウスをクリックしている間、リンク先が未訪問の時、リンク先が訪問済みの時なども指定できます。未訪問と訪問済みは、「a」や「area」などのリンクで、HTMLタグに「href」が指定されている時に有効になります。

a {
  /* 「a」の通常のスタイル */
}
a:hover {
  /* 「a」のマウスオーバー時（hover時）のスタイル */
}
a:active {
  /* 「a」をクリックしている間のスタイル */
}
a:link {
  /* 「a」の属性「href」で指定されたリンク先が未訪問の時 */
}
a:visited {
  /* 「a」の属性「href」で指定されたリンク先に訪問済みの時 */
}

ホバー・リンク関連の指定は、「:link」→「:visited」→「:hover」→「:active」の優先度（右にいくほうが優先度が高い）で反映されます。複数指定する際は、指定順にご注意ください。

位置指定系の「疑似クラス」

要素の位置を特定できる指定方法です。リストやテーブルなど、子要素を繰り返すHTMLタグでよく使いますが、それ以外の子要素が連続するケースでも有効です。サンプルでは、スタイルが効いている要素は赤枠・黄色背景がつきます。

最初の要素［:first-child］

親要素の直下にある、最初の子要素に対する指定です。

See the Pen 2015_05 by Matsuyama (@nakanaka-design) on CodePen.

最後の要素［:last-child］

親要素の直下にある、最後の子要素に対する指定です。

See the Pen 2015_06 by Matsuyama (@nakanaka-design) on CodePen.

特定のHTMLタグの最初の要素［:first-of-type］

親要素の直下にある、HTMLタグを限定した最初の子要素の指定方法です。「dl」や「table（tr）」などの場合は、子要素のHTMLタグの種類が複数あります。「dl」の場合、「:first-child」は最初の子要素を指すので、最初の「dt」のみが対象になってしまいます。最初の「dd」を指定する場合は、HTMLタグを限定して「:first-of-type」で指定します。

See the Pen 2015_07 by Matsuyama (@nakanaka-design) on CodePen.

特定のHTMLタグの最後の要素［:last-of-type］

親要素の直下にある、HTMLタグを限定した最後の子要素の指定方法です。

See the Pen 2015_08 by Matsuyama (@nakanaka-design) on CodePen.

条件指定（nth）系の「疑似クラス」の指定例

要素の位置を条件で指定できる「nth」系の疑似クラスです。ひとつひとつの指定方法ではなく、よく使う指定例でご紹介していきます。条件の指定方法を変えると、〇番目、〇番目以降、奇数番目、偶数番目、〇の倍数など、さまざまな指定ができます。特に、リストやテーブルで使うと、とても便利です。

指定のなかにある「n」という文字には、自動的に0からの整数で数値が代入されていきます。「2n」と指定した場合は、「2×0」「2×1」「2×2」…と続いていくので、「0」「2」「4」…と2の倍数を指定することができます。

指定例は、すべて「nth-child」を使っていますが、「nth-child」を「nth-last-child」に変更すれば最後からのカウント、「nth-of-type」「nth-last-of-type」に変更すれば、HTMLタグを限定しての、最初から（最後から）のカウントになります。

〇番目の要素

〇番目の子要素の指定方法です。

See the Pen 2015_09 by Matsuyama (@nakanaka-design) on CodePen.

〇番目までの要素

〇番目まで子要素の指定方法です。

See the Pen 2015_10 by Matsuyama (@nakanaka-design) on CodePen.

〇番目以降の要素

〇番目以降の子要素の指定方法です。

See the Pen 2015_11 by Matsuyama (@nakanaka-design) on CodePen.

〇番目から〇番目までの要素

〇番目から〇番目までの子要素の指定方法です。複数の「nth-child」を、複合セレクターで組み合わせて指定します。

See the Pen 2015_12 by Matsuyama (@nakanaka-design) on CodePen.

奇数番目の要素（odd）

奇数番目の子要素の指定方法です。リストやテーブルで、行ごとに背景色を変えるなどのケースで使えます。

See the Pen 2015_13 by Matsuyama (@nakanaka-design) on CodePen.

偶数番目の要素（even）

偶数番目の子要素の指定方法です。

See the Pen 2015_14 by Matsuyama (@nakanaka-design) on CodePen.

〇個ずつの要素（倍数）

倍数を使った子要素の指定方法です。数式を変えれば、2番目から3の倍数などの指定も可能です。

See the Pen 2015_15 by Matsuyama (@nakanaka-design) on CodePen.

See the Pen 2015_16 by Matsuyama (@nakanaka-design) on CodePen.

フォーム操作系の「疑似クラス」要素

フォームのパーツなどで使える疑似クラスです。フォームの設定やユーザーのアクションによってスタイルを変更できます。

フォームの入力中［:focus / :focus-within］

ユーザーが、フォームの入力欄や選択肢を操作している時（フォーカス時）の指定方法です。

See the Pen 2015_17 by Matsuyama (@nakanaka-design) on CodePen.

フォームの初期値［:checked / :default］

フォームの選択肢が選択されている時と、初期値として指定されている時の指定方法です。「:checked」が選択中の項目、「:default」が初期値として指定されている項目へ、スタイルが適用されます。

See the Pen Untitled by Matsuyama (@nakanaka-design) on CodePen.

フォームの入力前［:placeholder-shown］

入力欄に設定されている「placeholder」が表示されている時の指定方法です。「placeholder」は、テキスト入力欄で入力前に表示されるテキスト（一般的にはグレーの薄い文字）で、入力時には表示が消えます。入力前は入力欄にアイコンを表示させて、入力時にはアイコンを非表示にする、という切り替えもできます。

See the Pen 2015_19 by Matsuyama (@nakanaka-design) on CodePen.

入力禁止のフォーム［:read-only / :disabled］

フォームの入力欄が、入力禁止になっている時の指定方法です。入力欄に「readonly」や「disabled」が指定されていると、入力や編集ができなくなります。「:read-only」は「readonly」指定時、「:disabled」は「disabled」に適用されます。

See the Pen 2015_20 by Matsuyama (@nakanaka-design) on CodePen.

それ以外にも便利な「疑似クラス」

それ以外にも、便利な疑似クラスの指定方法がいくつかあります。ご紹介する3つは、いずれもわりと新しい指定方法で、今後かなり重要になってくると思います。これを使わなくても、他の指定方法やJavaScriptを使用すれば、実現できるものばかりですが、CSSでかなりシンプルに分かりやすく指定できるようになります。

条件をまとめて指定［:is］

クラス名やID名など、さまざまなセレクターを組み合わせることができる指定方法です。複合セレクターやセレクターリストとも似ていますが、指定方法と使えるケースがだいぶ変わります。

複合セレクターやセレクターリストの場合は、

/* 複合セレクター */
.name1.name2 {
  /* クラス名「name1」と「name2」の両方が指定されている時 */
}

/* セレクターリスト */
.name1, 
.name2 {
  /* クラス名「name1」と「name2」のどちらかが指定されている時 */
}

となりますが、「:is」を使うと

:is(.name1, .name2) {
  /* クラス名「name1」と「name2」のどちらかが指定されている時 */
}

という指定になります。この括弧のなかには、ID名やクラス名だけではなく、さまざまなセレクターがカンマ区切りでいくつも指定できます。

例えば下のHTMLで、見出しのスタイルは4つともほぼ同じで、「見出し②」と「見出し③」だけ、一部のスタイルを上書きしたいとします。

<section id="sec01">
  <h2 class="title">見出し①</h2>
</section>
<section id="sec02">
  <h2 class="title">見出し②</h2>
</section>
<section id="sec03">
  <h2 class="title">見出し③</h2>
</section>
<section id="sec04">
  <h2 class="title">見出し④</h2>
</section>

これまでのセレクターリストを使った指定では、

.title {
  /* クラス名「title」共通の指定 */
}
#sec01 .title,
#sec02 .title {
  /* ID名「sec01」と「sec2」の時だけ上書きしたい指定 */
}

となりましたが、「:is」にすると

.title {
  /* クラス名「title」共通の指定 */
}
:is(#sec01, #sec02) .title {
  /* ID名「sec01」と「sec2」の時だけ上書きしたい指定 */
}

このように、まとめて指定することができます。

条件に一致しない時［:not］

今度は反対に、条件に一致しない時の指定方法です。「:is」と同様に、括弧のなかに条件を指定します。こちらもカンマで複数指定が可能です。

例えば、「a」のホバー時に、サイト全体で共通のスタイルが指定してあるとします。しかし、一部のリンクだけは、ホバー時の指定を外したいケースがあります。これは、本文などのサイト全体で共通するホバー時のスタイルと、グローバルメニューや記事リストなどのホバー時のスタイルが、異なる時によく起こります。

本文に頻出する「a」すべてにクラス名を付けるのはなかなか大変です。これを回避するひとつのやり方として、無効にしたい「a」にクラス名を指定して、

<p><a href="#">ここ</a>と<a href="#">ここ</a>はマウスオーバーで赤字にしたいですが、<a href="#" class="none">ここ</a>は赤字にはしたくありません。</p>

a {
  color: #212121;
}
/* 「a」のホバー時は赤文字に変更 */
a:hover {
  color: #ff0000;
}
a.none:hover {
  color: #212121;
}

このようにスタイルを上書きしてあげれば、クラス名「none」だけ色が変わらない、ということができます。しかしこれを「:not」を使って指定すると

a {
  color: #212121;
}
/* 「a」のクラス名「none」が指定した以外のホバー時は赤文字に変更 */
a:not(.none):hover {
  color: #ff0000;
}

このように、かんたんに指定できてしまいます。また、リストの特定の要素だけ別の指定をしたい、という時にも使えます。例えば、リストのアイテムそれぞれに下線をつけて、最後の要素だけ下線を消したい、というケース。

これまでのCSSでは、

.list li {
  border-bottom: 2px dotted #212121;
}
.list li:last-child {
  border-bottom: none;
}

このように、最後の要素だけ下線を消す、ということをしていましたが、「:not」を使えば、

.list li:not(:last-child) {
  border-bottom: 2px dotted #212121;
}

これだけで済んでしまいます。

子孫要素が特定の条件に一致するとき［:has］

次は、子孫要素から条件を指定できるやり方です。これも指定方法は「:is」や「:not」と同様で、括弧のなかに条件を指定していきます。もちろん複数指定もOKです。

これまでは、この子孫要素からの条件の判定は、主にJavaScriptで行われてきました。しかし現在では、CSSでこの判定ができるようになりました。

「:focus」のサンプルでも使いましたが、子孫要素にあたるフォームの操作に応じて、親要素のスタイルを変更する、ということもできます。

.label:has(:checked) {
  /* クラス名「label」の子孫要素にチェックが入っている時の指定 */
}

これ以外でも、さまざまな使い方ができる、とても便利な指定方法です。

.item:has(img) {
  /* クラス名「item」の子孫要素に「img」がある時の指定 */
}

.title:has(+ p) {
  /* クラス名「title」の直後の兄弟要素に「p」がある時の指定（他のHTMLタグの場合は適用されない） */
}

.list:has(li:nth-child(3)) {
  /* クラス名「list」の子要素に3つ以上の「li」がある時の指定 */
}

使いこなすのはなかなか難しいですが、シンプルなケースから試してみてください。

疑似クラスを使えばクラス名が激減！

すべてを使いこなす必要はまったくありませんが、特に疑似クラスの指定方法を覚えていくと、これまでHTMLで指定していた大量のクラス名がいっきに減っていきます。また、ユーザーのアクションに応じて表示を切り替えられるので、ユーザビリティ的にもメリットがたくさんあります。

まずは分かりやすいもの、理解しやすいものから、ぜひ使ってみてください。こんな指定方法があったんだ！と楽しみながら、徐々に慣れていけば、いつの間にか使いこなせるようになっていると思います！

他にもあります「疑似クラス」

今回、使用頻度が低いものと、使用方法がかなり難しいものは、一覧から省いています。実際には、表の1.3倍程度の数があります。

もしお探しのものが見つからない場合は、セレクターはこちら、結合子はこちら、疑似クラスはこちらで探してみてください。

いつでもご相談ください！

ナカナカデザインラボでは、WEBサイト制作に必要なスキルが学べる「WEBデザインスキル講座」や、WEBにまつわることなら何でも相談OK「フリーレッスン」を、随時受け付けています。

フリーランス歴約20年の現役WEBデザイナー兼WEBデザイン講師が、分かりやすく解説をしながら、マンツーマンでレッスンを行います。プログラミングは苦手だけどWEBデザインをしてみたい、ひとりで書籍や動画教材を見てもよく分からない、自分のペースで学習を進めたい。どんな方でも大丈夫！ぜひ一度ご相談ください。