基本的にCSSでHTMLに装飾を施すには「どこに（セレクタ）・どんな装飾を（プロパティ）・どうする（値）」か指定しなければなりません。CSSセレクタを理解すればどこに対して装飾するのか？を限定的に指定することができます。
本記事は、CSSの基本が理解できている前提で記載しています。
このページのコンテンツ
CSSセレクタの種類
CSSを指定するときの基本的な書き方は以下の通りです。
セレクタ {プロパティ : 値;}
プロパティ（property）と値（value）を「:（コロン）」で区切ります。
- セレクタは、スタイルをどこに適用するかの対象です。
- プロパティは、セレクタにどんなスタイルを適用するかの指定です。
- 値は、プロパティに対してどうするかの指定です。プロパティ毎に指定できる値は決まっています。
タグ（要素）への指定
「要素セレクタ」と呼ばれています。装飾の適用範囲をHTMLタグに指定します。
h1 {
color: #1A78DB;
}
<h1>タイトル</h1> <p>テキストテキストテキスト</p>
プレビューサンプル
タイトル
テキストテキストテキスト
全ての要素を指定
「ユニバーサルセレクタ」と呼ばれ、全ての要素に一致します。
* {
color: #1A78DB;
}
<h1>タイトル</h1> <p>テキストテキストテキスト</p>
プレビューサンプル
タイトル
テキストテキストテキスト
クラス名で指定
「クラスセレクタ」と呼ばれます。クラス名が指定された要素にスタイルを適用します。クラス名の先頭に「.（ドット）」を付けて命名します。
.example {
color: #1A78DB;
font-weight: bold;
}
<h1>タイトル</h1> <p>テキストテキストテキスト</p> <h1 class="example">タイトル</h1> <p>テキストテキストテキスト</p>
プレビューサンプル
タイトル
テキストテキストテキスト
タイトル
テキストテキストテキスト
IDで指定
「IDセレクタ」と呼ばれます。ID名が指定された要素にスタイルを適用します。クラス名の先頭に「#（シャープ）」を付けて命名します。
#example {
color: #1A78DB;
font-weight: bold;
}
<h1 id="example">タイトル</h1> <p>テキストテキストテキスト</p> <h1>タイトル</h1> <p>テキストテキストテキスト</p>
プレビューサンプル
タイトル
テキストテキストテキスト
タイトル
テキストテキストテキスト
子孫セレクタ
セレクタ セレクタ（セレクタとセレクタの間は半角スペース）とすることで、ある要素が特定の要素の子孫要素である場合にスタイルが適用できます。
<!--下記は全てのp要素内のspanに適用される-->
p span {
color: #1A78DB;
font-weight: bold;
margin-right: 10px;
}
<h1>タイトル</h1> <p><span>2020/11/01</span>テキストテキストテキスト</p> <span>span内のテキスト</span>
プレビューサンプル
タイトル
2020/11/01テキストテキストテキスト
span内のテキスト
入れ子が孫要素やひ孫要素と階層が深くなっても全てに適用されます。
<!--下記は全てのdiv内にあるspanに適用される-->
div span {
color: #1A78DB;
font-weight: bold;
margin-right: 10px;
}
<h1>タイトル</h1> <div> <p><span>2020/11/01</span>テキストテキストテキスト</p> <div> <p><span>2020/11/01</span>テキストテキストテキスト</p> </div> </div> <span>span内のテキスト</span>
プレビューサンプル
タイトル
2020/11/01テキストテキストテキスト
2020/11/01テキストテキストテキスト
当然、セレクタにはクラス名も指定できます。
/*下記は全てのp要素内の.exampleのクラス名があるspanに適用される*/
p span.example {
color: #1A78DB;
font-weight: bold;
margin-right: 10px;
}
<h1>タイトル</h1> <p><span>2020/11/01</span>テキストテキストテキスト</p> <p><span class="example">2020/11/01</span>テキストテキストテキスト</p> <p><span>2020/11/01</span>テキストテキストテキスト</p>
プレビューサンプル
タイトル
2020/11/01テキストテキストテキスト
2020/11/01テキストテキストテキスト
2020/11/01テキストテキストテキスト
親要素の一つ下の階層の子要素にスタイルを指定
「子セレクタ」と呼ばれます。セレクタ > セレクタとすると、ある要素が特定の要素の直接の子要素の場合にスタイルが適用されます。
li > span {
color: #1A78DB;
}
<ul> <li><span>テキストテキストテキスト</span></li> <!--↓ここはliの直接的な子ではないのでスタイルはあたらない--> <li><div><span>テキストテキストテキスト</span></div></li> <li>テキストテキストテキスト</li> </ul>
プレビューサンプル
- テキストテキストテキスト
- テキストテキストテキスト
- テキストテキストテキスト
指定要素に隣接した要素にスタイルを指定
「隣接セレクタ」と呼ばれます。セレクタ + セレクタとすると、指定した要素に隣接する要素にスタイルを指定できます。隣接セレクタは要素と要素が直接隣接している場合に有効となるので、要素と要素の間に別の要素が存在する場合は対象になりません。
/*divに隣接したpにスタイルを指定*/
div + p {
color: #1A78DB;
}
<div> <h1>タイトル</h1> <p>テキストテキストテキスト</p> </div> <!-- ↓divに隣接したp要素なのでここにスタイルが当たる↓ --> <p>テキストテキストテキスト</p>
プレビューサンプル
タイトル
テキストテキストテキスト
テキストテキストテキスト
指定要素より後にある同階層の要素にスタイルを指定
「間接セレクタ」と呼ばれます。セレクタ ~ セレクタとすると、指定した要素より後ろにあり、且つ、同じ階層にある要素にスタイルを指定できます。
/*divより後にある同じ階層のpにスタイルを指定*/
div ~ p {
color: #1A78DB;
}
<p>テキストテキストテキスト</p> <div> /*ここはdivの子階層となるので対象外*/ <p>テキストテキストテキスト</p> </div> /*ここから下のpにスタイルが当たる*/ <p>テキストテキストテキスト</p> <p>テキストテキストテキスト</p>
プレビューサンプル
テキストテキストテキスト
テキストテキストテキスト
テキストテキストテキスト
テキストテキストテキスト
複数の要素にスタイルを指定
セレクタ, セレクタ（半角カンマで区切る）とすると、複数の要素に同じスタイルを指定できます。
/*h1とpの色を#1A78DBに指定*/
h1, p {
color: #1A78DB;
}
<h1>タイトル</h1> <p>テキストテキストテキスト</p> <ul> <li>リスト</li> <li>リスト</li> </ul> <p>テキストテキストテキスト</p> <p>テキストテキストテキスト</p>
プレビューサンプル
タイトル
テキストテキストテキスト
- リスト
- リスト
テキストテキストテキスト
テキストテキストテキスト
特定の属性名や属性値へ指定
「属性セレクタ」と呼ばれます。以下の内容で指定します。なお、属性セレクタには4つ書き方があります。
要素名[属性名または属性値]
例：a[target] { color: #333; }
上記は「target」属性があるa要素にスタイルが適用されます。
要素名[属性名]
属性名が一致する要素にスタイルが適用されます。
h1[title] {
color: #1A78DB;
}
<h1 title="xxx">適用される見出し</h1> <h1>適用されない見出し</h1>
プレビューサンプル
適用される見出し
適用されない見出し
要素名[属性名="属性値"]
属性名と属性値が一致する要素にスタイルが適用されます。
h1[title="test"] {
color: #1A78DB;
}
<h1 title="test">適用される見出し</h1> <h1 title="sample">適用されない見出し</h1>
プレビューサンプル
適用される見出し
適用されない見出し
要素名[属性名~="属性値"]
要素に指定した属性名があり、属性値が空白文字区切りで複数指定されてる場合に、その属性値が含まれている要素にスタイルが適用されます。
p[class~="test"] {
color: #1A78DB;
}
<p class="test abc">適用されるテキスト</p> <p class="sample abc">適用されないテキスト</p> <p class="test">適用されるテキスト</p>
プレビューサンプル
適用されるテキスト
適用されないテキスト
適用されるテキスト
要素名[属性名|="属性値"]
要素に指定した属性名があり、属性値がハイフン区切りで複数指定されてる場合に、その属性値が「前方一致」で含まれている要素にスタイルが適用されます。主にlang 属性で使用されるようですが、管理人は使った試しがありません。
p[lang|="en"] {
color: #1A78DB;
}
<p lang="en">適用されるテキスト</p> <p lang="ja">適用されないテキスト</p> <p lang="en-US">適用されるテキスト</p>
プレビューサンプル
適用されるテキスト
適用されないテキスト
適用されるテキスト
要素名[属性名^="属性値"]
CSS3から追加された属性セレクタです。要素に指定した属性名があり、指定した属性値が「前方一致」の場合、指定した要素にスタイルが適用されます。
input[name^="abc"] {
background-color: #ddd;
}
<input type="text" name="abc123" value="aaa" maxlength="5"> <input type="text" name="def123" value="bbb" maxlength="5">
プレビューサンプル
要素名[属性名$="属性値"]
CSS3から追加された属性セレクタです。要素に指定した属性名があり、指定した属性値が「後方一致」の場合、指定した要素にスタイルが適用されます。
input[name$="123"] {
background-color: #ddd;
}
<input type="text" name="abc123" value="aaa" maxlength="5"> <input type="text" name="abc456" value="bbb" maxlength="5">
プレビューサンプル
要素名[属性名*="属性値"]
CSS3から追加された属性セレクタです。要素に指定した属性名があり、指定した属性値が「部分一致」した場合、指定した要素にスタイルが適用されます。
input[name*="st"] {
background-color: #ddd;
}
<input type="text" name="test123" value="aaa" maxlength="5"> <input type="text" name="abc456" value="bbb" maxlength="5"> <input type="text" name="nest123" value="ccc" maxlength="5">
プレビューサンプル
まとめ
CSSセレクタの種類と指定方法のご紹介でした。
この他にも疑似要素や疑似クラスといった指定方法もありますが、これらについては別記事でご紹介します。
CSSセレクタの理解が深まれば、より少ないコードでスタイルを指定できたり、特定の部分だけにピンポイントでスタイルを当てることができるので非常に便利ですが、使いすぎには注意が必要です。
特定の部分に限定したスタイルというのは、もし別のページだけスタイルを変えたいとなった場合に、上書きのためのスタイルを書かなければならなくなるなど、メンテナンス性が低下します。以下の記事も参考にしてみてください。
この記事を書いた人管理人
SAKURAGRAPHICA代表
会社員の傍ら、フリーランスでWEBサイトの制作やWordPressによるCMSの構築・障がい者の就労支援としてホームページ制作の職業指導員も行っております。
