CSSセレクタの長さをスッキリ整理！初心者でも分かる書き方のコツ
生徒
「CSSのセレクタって、たまにすごく長くなって読みにくいんですけど、どうしたらいいですか？」
先生
「良い着眼点ですね。セレクタが長すぎると管理しにくくなりますから、なるべく短くシンプルに書くコツを覚えると良いですよ。」
生徒
「どうすればセレクタを短くできるんですか？」
先生
「それでは、CSSセレクタの書き方と、長くなりすぎないためのテクニックを具体的に解説していきましょう！」
1. CSSセレクタってそもそも何？
まずは「CSSセレクタ（しーえすえす せれくた）」という言葉の意味から説明します。
セレクタとは、HTMLのどの部分にデザイン（スタイル）を当てたいのかを指定するための言葉です。
たとえば、<h1>というタグに色をつけたいとき、CSSでは次のように書きます。
<style>
h1 {
color: red;
}
</style>
<h1>こんにちは！見出しです</h1>
このh1がセレクタです。
2. セレクタが長すぎるとどうなる？
セレクタを使ってCSSを書くとき、HTMLの構造に合わせて深く書きすぎてしまうと、次のように読みにくくなります。
<style>
.main .content .box .item .text .label {
font-weight: bold;
}
</style>
<div class="main">
<div class="content">
<div class="box">
<div class="item">
<div class="text">
<span class="label">ラベル文字</span>
</div>
</div>
</div>
</div>
</div>
このように「ドットがいっぱい続いているセレクタ」は、後から見たときにとても分かりづらいです。
どこを変更したらよいのか分からなくなる原因にもなります。
3. セレクタを短く書くためのコツ
CSSのセレクタをシンプルにするための方法をいくつか紹介します。
- クラス名はなるべく具体的で短く
- 必要以上に親要素を指定しない
- セレクタの階層は2〜3つまでが理想
- IDや特定のクラスで一発指定も効果的
次のように短くても、しっかりスタイルが適用されます。
<style>
.label {
font-weight: bold;
}
</style>
<span class="label">ラベル文字</span>
このように、必要な要素だけにクラスを付けてスタイルを当てれば、簡単で見やすいコードになります。
4. クラス名のつけ方も大切
クラス名をわかりやすくつけることで、セレクタもスッキリします。
たとえば、ボタンに使うクラス名は「btn」や「button」など、意味のある名前にすると良いです。
あいまいな名前（.box1や.abc123など）を使うと、後で自分でも意味がわからなくなってしまいます。
5. セレクタが長くなりすぎる例と改善方法
悪い例と良い例を見比べてみましょう。
悪い例：
<style>
.container .row .col .box .btn-area .btn-primary {
background-color: green;
}
</style>
<div class="container">
<div class="row">
<div class="col">
<div class="box">
<div class="btn-area">
<button class="btn-primary">送信</button>
</div>
</div>
</div>
</div>
</div>
良い例：
<style>
.btn-primary {
background-color: green;
}
</style>
<button class="btn-primary">送信</button>
このように、直接クラス名で指定することで、読みやすく修正しやすいCSSになります。
6. セレクタの設計で大事な考え方
CSSを書くときは、将来の変更やチームでの作業も考えて「読みやすさ」や「管理のしやすさ」を意識しましょう。
以下のようなルールを決めておくと便利です。
- できるだけクラスで指定する
- IDは使いすぎない（1ページに1回しか使えないため）
- 他のHTML構造に影響しにくいようにする
セレクタが長くなりがちなときは、一度その構造が複雑すぎないか見直してみましょう。
この記事を読んだ人からの質問
