Webページの見た目を整えるうえで、CSSは欠かせない存在です。
ただ、CSSを書き始めたばかりの頃によくつまずくのが「どの要素に、どうやってスタイルを当てるのか」という部分ではないでしょうか。
この「どこに当てるか」を決めているのが、今回のテーマであるCSSセレクタです。
セレクタの仕組みがわかると、思い通りの場所に色やサイズを適用できるようになり、CSSが一気に楽しくなります。この記事では、HTML/CSSを学び始めたばかりの方に向けて、CSSセレクタの基本から、少し応用的な属性セレクタや擬似要素までを、順を追って丁寧に解説していきます。
わかれば簡単なのよね～
そもそもCSSセレクタとは何か
CSSは、ざっくり言うと「HTMLのどの部分を、どんな見た目にするか」を指定するための言語です。その「どの部分を」にあたるのがセレクタです。
具体的なコードで見てみると、以下のような構造になっています。
css
セレクタ {
プロパティ: 値;
}たとえば次のコードでは、pがセレクタで、段落の文字色を赤にしています。
css
p {
color: red;
}つまりセレクタとは、スタイルを適用する「対象を指さす役割」を持つ部分だと考えるとわかりやすいです。この指さし方にはいくつもの種類があり、使い分けることで細かく見た目を制御できるようになります。
まず覚えたい基本のセレクタ3種類
最初に押さえておきたいのは、要素セレクタ・クラスセレクタ・IDセレクタの3つです。この3つだけでも、かなりの範囲のスタイリングができるようになります。
要素セレクタ(タイプセレクタ)
HTMLのタグ名をそのまま書くタイプのセレクタです。ページ内のすべての該当タグに、まとめてスタイルを当てたいときに使います。
css
h1 {
color: navy;
}
p {
line-height: 1.8;
}上のコードは、ページ内のすべてのh1を紺色にし、すべてのpの行間を広げる指定です。サイト全体の基本スタイルを整えるときによく使われます。
クラスセレクタ
特定の要素にだけスタイルを当てたいときに使うのが、クラスセレクタです。HTML側でclass属性をつけておき、CSS側ではクラス名の前にドット(.)をつけて指定します。
html
<p class="note">これは補足の文章です</p>
<p>これは普通の文章です</p>css
.note {
color: gray;
font-size: 14px;
}同じpタグでも、class="note"がついた方だけが灰色の小さな文字になります。クラスは同じ名前を何度でも使えるので、「複数の場所に同じスタイルを適用したい」ときに便利です。実際の現場では、このクラスセレクタが一番よく使われると言っても過言ではありません。
IDセレクタ
IDセレクタは、ページ内でひとつしかない特定の要素にスタイルを当てるときに使います。HTML側ではid属性を指定し、CSSではID名の前にシャープ(#)をつけます。
html
<header id="main-header">サイトのヘッダー</header>css
#main-header {
background-color: black;
color: white;
}ここで一点だけ注意してほしいのが、IDは同じページ内で一度しか使えないというルールです。同じIDを複数の要素につけることはHTMLのルール違反になります。また、IDはクラスよりも「指定の強さ(詳細度)」が高いため、後から上書きしづらくなるという特徴もあります。そのため最近では、スタイリング用にはIDよりもクラスを使うのが一般的です。
複数セレクタの組み合わせ方
基本の3種類を覚えたら、次はそれらを組み合わせる書き方も見ていきましょう。使う頻度が高いものを紹介します。
カンマ区切りでまとめて指定する
同じスタイルを複数のセレクタに当てたいときは、カンマで区切って並べます。
css
h1, h2, h3 {
font-family: "Noto Sans JP", sans-serif;
}h1、h2、h3のすべてに同じフォントを指定できます。同じスタイルを何度も書かずに済むので、コードがすっきりします。
子孫セレクタ(半角スペース区切り)
ある要素の中にある別の要素だけを対象にしたいときは、半角スペースで区切って指定します。
html
<article>
<p>記事本文の段落です</p>
</article>
<p>記事の外にある段落です</p>css
article p {
color: darkgreen;
}この書き方だと、articleの中にあるpだけが緑色になり、articleの外にあるpには影響しません。「この中にあるやつだけ」というニュアンスで覚えておくといいです。
子セレクタ(> 記号)
子孫セレクタが「何階層下にあってもOK」なのに対して、子セレクタは「ひとつ下の階層だけ」を対象にします。
css
ul > li {
list-style: square;
}ulの直下のliだけにスタイルを当てるという指定です。入れ子になったリストの中のliまでは影響しない、というのがポイントです。
少し応用的な属性セレクタ
ここからは一歩進んで、属性セレクタについて見ていきます。属性セレクタは、HTMLの属性(たとえばhrefやtypeなど)を手がかりにスタイルを当てる方法です。
よく使われる例としては、フォームの入力欄の種類ごとにスタイルを変えるケースがあります。
css
input[type="text"] {
border: 1px solid #ccc;
}
input[type="submit"] {
background-color: #0077cc;
color: white;
}テキスト入力欄と送信ボタンを、同じinputタグのままで見分けて装飾できます。
リンク先によってスタイルを変えることもできます。たとえば外部リンクだけに印をつけたい場合、次のように書けます。
css
a[href^="https://"] {
color: #c0392b;
}^=は「〜で始まる」という意味の書き方です。他にも$=(〜で終わる)、*=(〜を含む)などがあり、柔軟な指定ができます。クラスを増やさずに済むので、HTMLをすっきり保てるのが属性セレクタの良いところです。
擬似クラスと擬似要素の違いをやさしく解説
CSSセレクタの中でも、初学者がつまずきやすいのが擬似クラスと擬似要素です。名前が似ていて混乱しがちですが、役割は明確に違います。
擬似クラス(コロン1つ)
擬似クラスは、要素の「状態」に応じてスタイルを変えるときに使います。代表的なのが:hoverです。
css
a:hover {
color: orange;
}マウスカーソルがリンクの上に乗ったときだけ、文字色がオレンジに変わります。他にも、フォームにフォーカスが当たったときの:focus、リストの最初の要素を指す:first-childなどがよく使われます。
css
input:focus {
border-color: #0077cc;
}
li:first-child {
font-weight: bold;
}擬似要素(コロン2つ)
擬似要素は、要素の「一部」や「存在しない部分」を対象にするときに使います。代表的なのが::beforeと::afterで、要素の前後に装飾用のテキストやアイコンを追加できます。
css
.note::before {
content: "💡 ";
}class="note"がついた要素の文頭に、自動で電球アイコンが表示されるようになります。HTMLを直接編集しなくても装飾を加えられるので、実務でもよく使われるテクニックです。
違いをシンプルに整理すると、次のような表になります。
| 種類 | 書き方 | 役割 | 例 |
|---|---|---|---|
| 擬似クラス | コロン1つ(:) | 要素の状態を指す | :hover :focus :first-child |
| 擬似要素 | コロン2つ(::) | 要素の一部や仮想的な部分を指す | ::before ::after ::first-line |
初心者がやりがちなNGパターンとOKな書き方
最後に、学び始めの頃によく見かけるつまずきポイントをいくつか紹介しておきます。
クラス名の前のドットを忘れてしまう
css
/* NG例 */
note {
color: gray;
}これだとnoteという名前のタグを指す要素セレクタになってしまい、本来狙っていたclass="note"には当たりません。
css
/* OK例 */
.note {
color: gray;
}クラスには必ずドット、IDには必ずシャープを忘れずにつけましょう。
IDを使い回してしまう
html
<!-- NG例 -->
<section id="box">A</section>
<section id="box">B</section>IDは同じページ内で一度しか使えません。複数の要素に同じスタイルを当てたい場合は、クラスを使うのが正解です。
html
<!-- OK例 -->
<section class="box">A</section>
<section class="box">B</section>セレクタを過剰に詳しく書きすぎる
css
/* NG例 */
body div.container ul.menu li a.link {
color: blue;
}動くには動きますが、これだと後からスタイルを上書きしたいときに非常に面倒になります。詳細度が高すぎるセレクタは、メンテナンスの敵です。
css
/* OK例 */
.menu-link {
color: blue;
}目的の要素に専用のクラスを振ってあげる方が、シンプルで扱いやすくなります。
まとめと次に学ぶべきこと
ここまでで紹介した内容をざっくり振り返ると、CSSセレクタには大きく分けて次のような種類があります。
- 基本の要素セレクタ・クラスセレクタ・IDセレクタ
- 複数の要素を組み合わせる子孫セレクタや子セレクタ
- 属性を手がかりにする属性セレクタ
- 状態や仮想的な部分を指す擬似クラス・擬似要素
最初のうちは種類の多さに圧倒されるかもしれませんが、実際に手を動かしながら使ってみると、意外とすんなり身についていきます。まずは要素セレクタとクラスセレクタの2つを使いこなせるようになることを目指すと、挫折しにくいです。
セレクタの基本がつかめたら、次に学んでおきたいのが詳細度(Specificity)とカスケーディングの考え方です。
「なぜこのスタイルが優先されるのか」「なぜ自分の書いたCSSが効かないのか」といった疑問の多くは、この詳細度のルールを理解すると解決します。あわせて、displayプロパティやflexbox、gridといったレイアウト系の知識に進んでいくと、Webページを自由にデザインできる感覚が一気に広がっていきますよ。
焦らず、一つずつ着実に進めていきましょう。
