はじめに
「CSSのセレクタって種類が多すぎて、何から覚えればいいの？」そんな悩みを抱えていませんか？
セレクタはCSSの基本であり、正しく使えばHTML要素を自在に装飾できますが、初心者にとってはややこしく感じる部分でもあります。
この記事では、これだけ覚えればOK！という厳選した基本セレクタ10種類をわかりやすく解説します。
初心者の方でも、この記事を読み終えるころには「セレクタを自由に使いこなす感覚」がつかめるはずです。
まずは最もよく使われるセレクタから、一緒に学んでいきましょう！
CSSセレクタとは？まずは基本の理解から
セレクタの役割とは？
セレクタは、CSSで「どのHTML要素にスタイルを適用するか」を指定するためのものです。
p {
color: blue;
}この例では、pタグすべてのテキストを青色にしています。
HTMLの構造に応じて、柔軟に指定ができるのがセレクタの特徴です。
CSSにおける「要素の指定」の考え方
セレクタにはいくつかの種類があります。
- タグ名（要素） →
p,h1,divなど - クラス名 →
.btn,.titleなど - ID名 →
#main,#headerなど - 状態指定 →
:hover,:first-childなど
セレクタとプロパティの関係
CSSの基本構文は以下のようになります。
セレクタ {
プロパティ: 値;
}h1 {
font-size: 24px;
color: red;
}ここでは、h1がセレクタ、font-sizeとcolorがプロパティ、24pxとredが値です。
覚えておきたい基本のCSSセレクタ10選
1. 要素セレクタ（p, div, h1など）
役割： HTMLタグそのものを指定します。
使いどころ： ページ全体に共通のスタイルを適用したいとき。
<p>これは段落です。</p>p {
font-size: 16px;
line-height: 1.6;
}2. クラスセレクタ（.box）
役割： 共通のスタイルを複数要素に適用します。
<div class="box">内容</div>.box {
padding: 20px;
background-color: #f0f0f0;
}3. IDセレクタ（#header）
役割： 一意の要素にスタイルを適用します。
<div id="header">ヘッダー</div>#header {
background-color: #333;
color: white;
}4. 子孫セレクタ（div p）
役割： 指定要素の中にある任意の子孫要素を対象にします。
<div>
<p>対象</p>
</div>div p {
color: green;
}5. 子セレクタ（ul > li）
役割： 直下の子要素のみにスタイルを適用します。
<ul>
<li>対象</li>
<ul>
<li>これは対象外</li>
</ul>
</ul>ul > li {
font-weight: bold;
}6. 隣接兄弟セレクタ（h2 + p）
役割： 直後に続く兄弟要素1つに適用。
<h2>見出し</h2>
<p>これが対象</p>h2 + p {
margin-top: 0;
}7. 属性セレクタ（input[type="text"]）
役割： 特定の属性を持つ要素にスタイルを適用します。
<input type="text">
<input type="submit">input[type="text"] {
border: 1px solid #000;
}8. グループセレクタ（h1, h2, h3）
役割： 複数のセレクタをまとめて同じスタイルを適用します。
h1, h2, h3 {
font-family: sans-serif;
}9. 擬似クラス（:hover, :first-child）
役割： 要素の状態に応じてスタイルを変化させます。
a:hover {
color: red;
}
li:first-child {
font-weight: bold;
}10. 擬似要素（::before, ::after）
役割： 要素の前後に疑似的なコンテンツを追加します。
p::before {
content: "★ ";
color: gold;
}セレクタの使い方と具体的な記述例
基本的な構文ルール
- セレクタは中括弧
{}で囲む - 各プロパティはセミコロン
;で区切る - インデントを揃えて読みやすくする
よく使うセレクタのコード例
body {
background-color: #fff;
}
.container {
width: 80%;
margin: 0 auto;
}
#main {
padding: 20px;
}HTMLとセットで見るとわかりやすい！
<div class="container" id="main">
<p>こんにちは！</p>
</div>#main p {
color: green;
}よくある間違いとトラブルシューティング
セレクタが効かないときのチェックポイント
- セレクタのスペルミス
- 指定対象の存在しないクラスやID
- 優先順位（詳細度）の競合
クラスとIDの使い分けミス
- クラスは再利用向き
- IDは一意な要素に限定
セレクタの指定が重複・競合しているケース
- より詳細なセレクタが優先される
- CSSの読み込み順も影響する
CSSセレクタを効率よく学ぶコツ
実際のWebページを見てまねる
他のサイトの構造を観察して、似たコードを自分でも書いてみましょう。
デベロッパーツールで確認しながら練習
ChromeやFirefoxの検証ツールで、実際のセレクタがどう作用しているかを観察できます。
無理に全部覚えようとしなくてOK！
まずはよく使う5〜6個を重点的に覚えましょう。
まとめ：10個のセレクタでCSSがもっと楽しくなる！
今回紹介したセレクタの一覧とポイント復習
- 要素セレクタ
- クラスセレクタ
- IDセレクタ
- 子孫・子セレクタ
- 隣接兄弟セレクタ
- 属性セレクタ
- グループセレクタ
- 擬似クラス
- 擬似要素
次にステップアップするなら？おすすめセレクタと学習法
nth-child,not,nth-of-typeなどの応用セレクタを学ぶMDN Web DocsやCSS-Tricksなどの信頼性ある資料を活用する
これらを身につければ、CSSの理解度が一気に上がります。焦らず、一歩ずつ学んでいきましょう！
コメント