2025年12月16日
【逆引き・検索OK】CSSセレクター / 疑似クラス一覧早見表（辞典、リファレンス）
2025年12月15日 / WEBデザインTIPS
【初心者必見！】CSSを使いこなすポイント9選
※この記事は 2 分程度でお読みいただけます。
WEBサイトのレイアウトやパーツの装飾をするCSS。学習のはじめの段階では、クラス名やセレクターの指定方法、プロパティの種類など、CSSの基本の使い方を中心に学んでいきます。
たいていの場合、スクールの動画や書籍など、ひとつの教材をもとに学んでいくことが多いと思います。しかし、CSSには実はいろいろな使い方や指定方法があって、教材によってやり方がけっこう違います。
今回は、CSSを教えているなかで、このやり方を知っていればもっとかんたんに分かりやすくなるのに！と、よく感じるポイントを9つご紹介していきます。
目次
＜その1＞ HTMLタグには、クラス名を複数指定できる
まず1つめが、HTML側でのクラスの複数指定です。HTMLタグには、クラス名を1つだけでなく、複数指定することができます。例えば、
<div class="name1 name2">
<!-- コンテンツの内容 -->
</div>このように、クラス名を半角スペースで区切ってあげると、両方のクラス名のスタイルが適用されます。半角スペースで区切れば、3つでも4つでも指定は可能です。
汎用的なスタイルの指定で使える
これは、汎用的なスタイルを適用するのに便利です。例えば、文章内である部分を赤字、ある部分を太字、ある部分を赤太字にするとします。この場合、太字と赤字の2つのスタイルを用意しておけば、赤太字の部分はクラス名を両方指定するだけです。
See the Pen 2637_01 by Matsuyama (@nakanaka-design) on CodePen.
あらかじめ、WEBサイト内でよく使うスタイルを用意しておけば、わざわざ新たにCSSを追加することなく、クラス名を組み合わせて指定しながら使うことができます。
複数指定で役に立つケース
それ以外にも、複数指定が役に立つケースはたくさんあります。例えば、表示やレイアウトはほぼ同じで、一部のスタイルだけが変わるケースです。共通のスタイルを指定するクラス名と、それとは別に、変更するスタイルのクラス名を用意しておきます。下の例では、クラス名「list」でグリッド共通の指定を、「column2」と「column3」でグリッドの横の分割方法「grid-template-columns」だけを指定しています。
See the Pen 2637_02 by Matsuyama (@nakanaka-design) on CodePen.
タブの現在位置表示（現在開いているページだけ表示を変える）などでも使えます。通常のタブのスタイルを指定したうえで、現在位置表示用の「current」というクラス名にスタイルを追加します。あとは、ページが変わるごとに、クラス名「current」を指定する位置を変更するだけです。
See the Pen 2637_03 by Matsuyama (@nakanaka-design) on CodePen.
＜その2＞ セレクター内の半角スペースは、子孫要素に対する指定になる
2つめは、CSSでセレクターを半角で区切って指定するやり方です。セレクター内の半角スペースは、子孫要素に対する指定になります。この指定方法、正しくは子孫結合子といいます。これもさまざまなケースで使います。
子孫要素すべてにクラス名を付けなくてもOK
特に「ul」「dl」「table」など、子孫要素とセットのHTMLタグで使うと便利です。例えば、「ul」でリストをつくるとき、リスト全体とリストのアイテムに別々のクラス名を指定をすると、
<ul class="list">
<li class="list-item">リストアイテム</li>
<li class="list-item">リストアイテム</li>
<li class="list-item">リストアイテム</li>
</ul>.list {
/* リスト全体に対する指定 */
}
.list-item {
/* リストアイテムに対する指定 */
}このようになります。これを子孫結合子を使った指定方法に変えれば、
<ul class="list">
<li>リストアイテム</li>
<li>リストアイテム</li>
<li>リストアイテム</li>
</ul>.list {
/* リスト全体に対する指定 */
}
.list li {
/* リストアイテムに対する指定 */
}と、HTMLがだいぶすっきりします。リストやテーブルの子孫要素に対して、そこでしか使わないスタイルであれば（他で使いまわすことがないスタイル）、このように子孫結合子を使えば、すべてのHTMLタグにクラス名を付ける手間が省けます。
スタイルの使い分けにも使える
また反対に、親要素からの使い分けにも使えます。例えば、ページ内に見出し「h2」が複数あって、特定の「section」内だけ、一部のスタイルを変更するとします。「section」にID名が付けられているのであれば、ID名からの子孫結合子で指定すれば、特定の部分だけスタイルを上書きすることができます。
See the Pen 2637_04 by Matsuyama (@nakanaka-design) on CodePen.
また、「body」にページごとのID名を付けてあげれば、ページによってスタイルを使い分けるということもできます。
<html>
<head>
<title>ページタイトル</title>
</head>
<body id="name">
<h1>ページタイトル</h1>
</body>
</html>h1 {
/* h1の基本のスタイル */
}
body#name h1 {
/* このページの見出しにだけ追加したいスタイル */
}＜その3＞ セレクターの連続した文字列は、1つの要素に対しての指定になる
3つめは、CSSでセレクターの指定に半角スペースを入れず、連続して指定するやり方です。半角スペースで開けると子孫要素に対する指定になりましたが、開けずに連続して指定をすると、自分自身に対しての指定になります。複合セレクター、属性セレクター、疑似要素、疑似クラス要素などの指定で使われます。
「自分自身が〇〇のとき」という指定で使う
セレクターに半角スペースを入れず連続で記述した場合、自分自身のものとして扱われます。たとえば、下記のようにHTMLタグやクラス名、ID名を組み合わせて、より限定的な指定をすることができます。この指定方法は、複合セレクターと呼ばれます。1つの組み合わせだけでなく、3つ4つと組み合わせることもできます（セレクターが分かりづらくなるので、あまりお勧めはしません…）。
.name1.name2 {
/* クラス名［name1］と［name2］の両方が指定されているとき */
}
#name1.name2 {
/* ID名［name1］とクラス名［name2］の両方が指定されているとき */
}
p.name {
/* ［p］にクラス名［name］が指定されているとき */
}
div#name {
/* ［div］にID名［name］が指定されているとき */
}
.name1.name2.name3 {
/* クラス名［name1］と［name2］と［name3］のすべてが指定されているとき */
}より限定的な使い分けができる
複数指定のサンプルで紹介した一部のスタイルの使い分けは、この複合セレクターを使えば、より限定的な指定にできます。タブ表示の例では、現在位置表示を「.current」というセレクターで指定をしていましたが、これを「.tab-item.current」に変更します。これで「tab-item」と「current」の両方が指定されているときということになるので、これ以外の場所に誤ってスタイルが適用されてしまう、ということも防げます。また、別の場所で「current」というクラス名を再度使用することも可能になります。
See the Pen 2637_05 by Matsuyama (@nakanaka-design) on CodePen.
属性セレクター、疑似要素、疑似クラス要素でも使う
連結させるセレクターの指定方法は、複合セレクターだけでなく、HTMLタグに指定された属性で使い分けられる属性セレクター、要素の前後にCSSから要素を追加できる疑似要素、さまざまな条件で指定を分けることができる疑似クラス要素などでも使います。
input[type="text"] {
/* 属性セレクターの例 */
}
.name::before {
/* 疑似要素の例 */
}
.name:first-child {
/* 疑似クラス要素の例 */
}いずれも、自分自身が〇〇のときという指定になります。「[」「::」「:」の前に半角スペースが入ってしまうと、子孫要素という扱いになるので、自分自身のすべての子孫要素が〇〇のときという指定になってしまいます。指定の際にはご注意ください。
JavaScriptとの併用に使いやすい
複合セレクターは、JavaScriptとの併用で使うことも多いです。JavaScriptでは、クリックしたら表示を切り替え、スクロールしたら表示させる、画面の読み込みが終わったら表示など、ユーザーのアクションや状況に応じた表示の変化を行うことがあります。
多くの場合が、JavaScript側から状況に応じクラス名の付け外しをして表示の切り替えをしていますが、この場合も複合セレクターを使うと指定がとても便利です。
.menu {
/* 通常の状態の指定 */
}
.menu.show {
/* JavaScriptでクラス名「show」が付いたときの指定（画面の位置や透明度を変えるなど） */
}＜その4＞ セレクターのカンマ（,）は、複数セレクターに同じ指定をする際に使う
4つめは、セレクターの複数指定です。セレクターリストと呼ばれます。同じスタイルを別々のセレクターにまとめて指定したい時に使えます。次のように、カンマで区切って指定します。
.name1,
.name2 {
/* クラス名「name1」と「name2」に同時にスタイルを指定 */
}これで、クラス名「name1」と「name2」に、一括で同じ指定ができます。セレクターリストを使う場合は、1行で書いてしまうとセレクターの区切りが分かりづらくなってしまうので、カンマの後に改行を入れるとCSSが見やすくなります。
子孫要素の指定や疑似要素でも使える
セレクターリストは、子孫結合子と組み合わせて使うこともあります。例えば「table」の「th」と「td」に、パディングや罫線など同じ指定をしたいときは、
See the Pen Untitled by Matsuyama (@nakanaka-design) on CodePen.
このように指定すれば、それぞれに指定をする必要がなくなります。
また、疑似要素でも使えます。疑似要素は「::before」と「::after」の2種類が使えますが、もしほとんど同じスタイルでよければ、
See the Pen 2637_07 by Matsuyama (@nakanaka-design) on CodePen.
このように、共通部分はセレクターリストで指定して、スタイルが変わるところだけを、個別のセレクターで指定すれば、まったく同じプロパティを何度も書く必要がなくなります。
＜その5＞ セレクターの指定には、クラス名だけでなくID名やHTMLタグも使える
これまでいろいろなセレクターの指定方法を解説してきましたが、子孫セレクター、複合セレクター、属性セレクター、セレクターリストなど、ほとんどの場合は、指定にはクラス名だけでなく、ID名やHTMLタグが複合的に使えます。組み合わせは自由です。
/* 指定例（実際にはこんなに複雑にしないでください！） */
#sec01 input.input-text[type="text"] {
/* ID名「sec01」の子孫要素の、クラス名「input-text」が指定されていて、属性「type="text"」が指定されている「input」 */
}あまり複雑にしすぎてしまうと、あとで修正などする時にとても大変になるので、組み合わせすぎは厳禁ですが、ご自身で理解しやすい形で指定してください。
＜その6＞ セレクターの指定には、優先度（詳細度）がある
6つめは、セレクターの指定方法による優先度です。CSSのセレクターの指定には詳細度と呼ばれる優先度があります。
基本は後から指定した方が優先
CSSは、基本的に後に書いた指定が優先されます。CSSは、外部ファイルとして読み込んだり、また、HTMLファイルの「head」内にも記述できますが、例えばこのようなCSSを指定している場合は、
<html>
<head>
<title>ページタイトル</title>
<link rel="stylesheet" href="css/style1.css">
<!-- 外部ファイルを読み込み ① -->
<style>
/* HTML内で指定 ② */
</style>
<link rel="stylesheet" href="css/style2.css">
<!-- 外部ファイルを読み込み ③ -->
</head>
<body>
<!-- ページのコンテンツ -->
</body>
</html>①→②→③の順番で、それぞれのなかで後に書いてあるCSSが優先されます。同じクラス名やHTMLタグに指定したスタイルは、すべて後から書いた方で上書きされます。
セレクターの指定方法で優先順位が変わる
その基本を踏まえたうえで、CSSには詳細度という優先順位があります。セレクターの指定方法によってスコア（指定の重み）が決められていて、より詳細度の高い指定が優先されます。
スコアの計算方法は、少し分かりづらいので省略しますが、セレクターの指定方法ごとの優先度を「低い ⇔ 高い」で、下表にまとめました。優先度が高ければ、CSSの指定順が前であっても優先して適用されます。詳細度の計算方法について詳しく知りたい方は、MDN「詳細度」をご覧ください。
セレクターの指定方法別「優先度」一覧
| 優先度 | 指定方法 | 概要・指定例 |
|---|---|---|
| - | 後から指定 | 後から指定されたものが優先される（詳細度が同じ場合の基本的な考え方） |
| 最低 | 全称 セレクター |
すべてのHTMLタグに対して指定
* {
} |
| 低い | 要素型 セレクター |
HTMLタグ名で指定
p {
} |
| 疑似要素 セレクター |
疑似要素に指定
div::before {
} |
|
| 普通 | クラス セレクター |
クラス名で指定
.name {
} |
| 属性 セレクター |
HTMLの属性で指定
input[type="text"] {
} |
|
| 擬似クラス セレクター |
擬似クラスで指定
li:first-child {
} |
|
| 高い | ID セレクター |
ID名で指定
#name {
} |
| 最高 | インラインで 指定 |
HTMLタグにstyle属性で直接指定
<p style="">
|
| 最終手段 | !important | 各プロパティ末尾に半角スペースを空けて「!important」を指定
.name {
color: #ff0000 !important; } |
この優先度の影響で、CSSを後から指定しても前で指定しているスタイルが適用されてしまうということが起こります。間違いなくCSSを指定してるのになぜか反映しない、というときは、この優先度も疑ってみてください。ブラウザのデベロッパーツールでCSSのプロパティを確認したとき、取り消し線で消されているプロパティは、何かしらの優先度が高い指定で上書きされています。
See the Pen 2637_08 by Matsuyama (@nakanaka-design) on CodePen.
最終手段の「!important」でも乱用は厳禁！
このなかで、かなり優先度が高いインラインで指定と「!important」があります。インライン指定はHTMLタグに直接「style」属性でCSSを指定するやり方、「!important」はCSSの各プロパティの末尾に指定するやり方です。この2つはかなり優先度が高く、クラス名やID名など他の指定を、ほとんどの場合で上書きしてくれます。
See the Pen 2637_09 by Matsuyama (@nakanaka-design) on CodePen.
しかしこの2つ、使用には十分に注意してください。この指定を使うと、後で別のスタイルを指定するときに、かなり苦労します。再度「!important」を使えば、さらに上書きはできますが、このやり方を続けていくと、CSSが「!important」だらけで、めちゃくちゃになっていきます。CSSのメンテナンス性もだいぶ悪くなります。
この2つはあくまでも最終手段で、既存のCSSのセレクターがどうしても上書きできないときなど、限定して使うようにしてください。
＜その7＞ クラス名やセレクターの指定にはルールとポリシーを持つ
7つめは、クラス名やセレクター指定のルールです。学習はじめのタイミングで、必ずつまづくポイントといっていいのが、このクラス名の付け方や、セレクター指定のルールです。ちなみに自分自身も、いまだにこれで失敗することはあります…。
HTMLとCSSの橋渡しをするクラス名ですが、WEBページのコーディングを進めていくと、大量のクラス名が必要になってきます。ここは見出しだからこうしよう、ここはリストだからこうしよう。その時々の思いつきで名前を付けていくと、どこにその名前を付けたのか、このセレクターがどこの指定をしているのかが、だんだん分からなくなってきます。
また、セレクターの指定方法をいいかげんにしていくのも危険です。優先度の影響でスタイルが上書きできなくなったり、CSSが乱雑になっていきます。
このような混乱を防ぐためには、指定にあたってのルールとポリシーを持つことが大切です。
BEMなどの命名規則を使う
一般的によく使われるクラス名の命名規則で、BEM（Block, Element, Modifier）という考え方があります。SMACSSやOOCSSといった他の命名規則もありますが、BEMは非常によく使われています。BEMの名前の通り、クラス名を「Block（ブロック）」「Element（エレメント）」「Modifier（モディファイア）」の3つのブロックに分けて考えます。
- ブロック…要素の汎用的な種類（header、nav、menu、listなど）
- エレメント…ブロックにおける要素の種類（image、text、item、iconなど）
- モディファイア…要素の状態（large、primary、openなど）
この3つのブロックを組み合わせてクラス名を付けていきます。エレメントは前にアンダースコアを2つ（__）、モディファイアはハイフンを2つ（--）で連結します。例えば、下が命名のイメージになります。
.menu {
/* メニュー全体 */
}
.menu__item {
/* メニューのアイテム */
}
.menu--active {
/* メニューがアクティブな時 */
}
.menu__item--active {
/* メニューのアイテムがアクティブな時 */
}クラス名が若干長くなりますが、大規模なサイト制作時やチームでWEBサイトを構築する際には、命名のルールが明確になるので、かなり重宝します。
個人やチームで指定方法を統一する
もし、BEMなどの命名規則を使わない場合でも、クラス名には何かしらのルールを決めておいた方が整理しやすくなります。例えば、
- 要素の種類
- 使用するページ
- 小分類
このようなルールを決めて、
.title-home {
/* トップページのタイトル */
}
.title-home-text {
/* トップページのタイトル内のテキスト */
}
.title-home-icon {
/* トップページのタイトル内のアイコン */
}
.title-page {
/* その他のページの共通のタイトル */
}という形で命名していくこともできます。いずれにしても、行き当たりばったりでクラス名を付けることはせず、個人であれば自分自身のルール、チームであればチームの共通のルールを最初に決めてから、CSSのコーディングをスタートするようにしてください。
HTMLタグや汎用的なクラス名の指定には要注意
もうひとつ注意していただきたいのが、HTMLタグでセレクターを指定したり、汎用的なクラス名を使用する場合です。HTMLタグでスタイルを指定すると、とうぜんですが、すべてのHTMLタグが対象になります。また「title」「date」「ja」「en」「photo」「show」など、汎用的でよく使われる語句で指定する場合も、別の箇所でクラス名が重複する可能性があります。そうなると、予期していない部分にスタイルが効いてしまったりもします。
もし、そういった指定をするのであれば、子孫結合子や子結合子、複合セレクターなど、限定的な形で指定するやり方を必ずおこなってください。
.title1 {
/* クラス名「title1」のスタイル */
}
.title1 .ja {
/* クラス名「title1」内にある「ja」のスタイル */
}
.title2 {
/* クラス名「title2」のスタイル */
}
.title2 .ja {
/* クラス名「title2」内にある「ja」のスタイル */
}＜その8＞ 同じ指定はできるだけまとめて、使い回しができるようにする
CSSを使いこなすための大きなポイントとして、再利用性があります。同じWEBサイトでは、見出しやボタン、文字の体裁など、同じスタイルを繰り返し使用することが多いです。コンテンツの横幅や余白なども、WEBサイト全体で統一することがあります。
同じスタイルは、できるだけ使い回せるようにCSSの指定をするよう、心がけてください。例えば、WEBサイトで表示するコンテンツのエリアが、PCで表示した際には1200px以上広げない、1200pxになった場合は左右中央に配置する、ブラウザの左右の余白を40pxつける、にするとします。その場合は、
.container {
max-width: 1200px;
margin-inline: auto;
padding-left: 40px;
padding-right: 40px;
}このクラス名をひとつ用意しておきます。あとは、横幅を制御したいブロックのHTMLタグに対して、クラス名「container」を付けていけば、まとめて横幅を指定することができます。また、修正が必要になった場合も、このクラス名の指定を修正すれば、すべての要素に同じ修正が反映されます。
このように、使い回しができるスタイルはできるだけまとめて指定してください。何度も同じプロパティを繰り返し指定することも減りますし、修正などのメンテナンスもずっとかんたんになります。
＜その9＞ CSSのためにID名は使わない
最後の9つめは、CSSのためにID名は使わないです。ID名でもCSSの指定ができるため、ID名を大量に使ってCSSを書く教材がときどきあります。
ID名の本来の役割りはHTMLのため
ID名は命名に厳格な規則があります。そのひとつが同じID名は同一のページで使えないです。ID名を使うシーンでまず思い浮かぶのは、ページ内リンクです。下記のようにリンクを指定すると、ページ内の目的の場所に移動できます。
<p>ページの<a href="#sec01">特定の部分</a>にページ内リンクします。</a>
<section id="sec01">
<!-- ID名「sec01」のコンテンツ -->
</section>この例で考えてみると、ページ内に同じID名が複数あったら、どこにリンクをすればよいか分からなくなりますよね？ ID名はページ内の特定の部分にフラグを立てる（マークをする）ような使われ方をします。
一方のクラス名は、純粋にHTMLとCSSの橋渡しが役割りです。同じページ内で、同じクラス名を何回繰り返しても問題ありません。
優先度のところでも述べましたが、ID名は優先度が高いため、後でスタイルを上書きすることが困難になります。すでにあるID名を、スタイルの使い分けなどで使う分には問題ありませんが、CSSのスタイルを設定するために、ID名を多用するのはできるかぎりやめるようにしましょう。
基本を理解すればHTMLもCSSもずっとシンプルになる！
CSSを使いこなすための9つのポイントを解説してきました。コーディングを学びはじめたばかりのころは、HTMLもCSSも、ごちゃごちゃと見づらいソースコードになると思います。ですが、このポイントを頭に入れておくだけで、かなりシンプルで分かりやすいソースコードになっていきます。何度も繰り返し練習をしていくと、最初のころに比べると、HTMLもCSSもソースコードが全体の2/3から半分くらいまで減ることもあります。
分かりやすくメンテナンスしやすいソースコードを目指して、指定方法をいろいろと試してみてください。ときには、他人が書いたソースコードを見て、参考にするのもいいと思います。ソースコードを書く分量も減って、修正もかなり楽になって、今よりももっとコーディングが楽しくなっていくはず！です。
いつでもご相談ください！
ナカナカデザインラボでは、WEBサイト制作に必要なスキルが学べる「WEBデザインスキル講座」や、WEBにまつわることなら何でも相談OK「フリーレッスン」を、随時受け付けています。
フリーランス歴約20年の現役WEBデザイナー兼WEBデザイン講師が、分かりやすく解説をしながら、マンツーマンでレッスンを行います。プログラミングは苦手だけどWEBデザインをしてみたい、ひとりで書籍や動画教材を見てもよく分からない、自分のペースで学習を進めたい。どんな方でも大丈夫！ぜひ一度ご相談ください。
マツヤマ ヤスヒサ
