CSSで複数のセレクタやクラスを指定した書き方や指定可能なセレクタの書き方を解説！
CSSで2つ以上のセレクタやclass（クラス）を複数指定する方法や、CSSでセレクタの対象範囲を絞り込む方法、また指定可能なセレクタの書き方などをご紹介します！セレクタ指定を駆使してCSS初心者からレベルアップしましょう！
HTMLとCSSのコーディングでセレクタやclass属性を複数指定して、対象範囲を絞り込むことってよくありますよね！
プロにとっては当たり前ですが、CSSの勉強を始めたばかりで知らない方のために、
今回はCSS初心者向けとして、2つ以上のセレクタやclass（クラス）を複数指定する方法や、CSSでセレクタの対象範囲を絞り込む方法、また指定可能なセレクタの書き方などをご紹介します！
CSSで複数のセレクタやクラスを指定した書き方
複数のセレクタをカンマで区切り1つのCSSをまとめて指定する
複数のセレクタをカンマで区切って同じCSSをまとめて適用したい場合に使用します。
【CSS】複数のセレクタをカンマで区切り1つのCSSをまとめて指定する
h1, h2 {
color: #444444;
}サンプルコードでは、セレクタのh1要素とh2要素をまとめて指定しています。
もちろん、classやIDなどの属性値や指定可能なセレクタであればカンマで区切ることができます。
セレクタが多くなる場合は、classにして各要素に適用した方が分かりやすいです。
特定の要素の中にある要素をスペース区切りで指定する（子孫セレクタ）
複数のセレクタをスペースで区切って対象を絞り込みたい場合に使用します。
対象先の要素のことを一般的に子孫セレクタといいます。
子孫セレクタとは、要素の中の要素、クラスの中のクラスなどネストされている（入れ子）要素を絞り込んで指定することが出来ます。
かなり一般的に使われる書き方ですね！
【CSS】特定の要素の中にある要素をスペース区切りで指定する（子孫セレクタ）
.header h1 {
font-size: 35px;
}【HTML】特定の要素の中にある要素をスペース区切りで指定する（子孫セレクタ）
<div class="header">
<h1>ここが適用範囲です。</h1>
<p>ここは適用されません。</p>
</div>
<section>
<h1>ここは適用されません。</h1>
<p>ここは適用されません。</p>
</section>サンプルコードでは、.headerの内部にあるh1要素にのみCSSが適用されます。
この場合、section要素内のh1要素には適用されません。
特定の要素の直下にある要素を>区切りで指定する（子セレクタ）
特定の要素の直下にある要素を絞り込みたい場合は>区切りを使用します。
対象先の要素のことを一般的に子セレクタといいます。
子セレクタとは、初めに指定した要素の直下である子要素が適用範囲です。
そのため、上の子孫セレクタとは違い、さらにネストされている要素に対しては適用されません。
【CSS】特定の要素の直下にある要素を>区切りで指定する（子セレクタ）
section > p {
margin-bottom: 30px;
}【HTML】特定の要素の直下にある要素を>区切りで指定する（子セレクタ）
<section>
<p>ここが適用範囲です。</p>
<div>
<p>ここは適用されません。</p>
</div>
</section>サンプルコードでは、section要素の直下にあるp要素のみが有効範囲です。
逆にdiv要素内のp要素は、section要素直下ではないためスタイルが適用されません。
特定の要素の次にある要素を+区切りで指定する（兄弟セレクタ）
特定の要素の次にある同列階層の要素を指定したい場合は+区切りを使用します。
対象先の要素のことを一般的に兄弟セレクタといいます。
初めに指定した要素と同じ階層なので兄弟要素というわけですね！
【CSS】特定の要素の次にある要素を+区切りで指定する（兄弟セレクタ）
.first + li {
color: red;
}【HTML】特定の要素の次にある要素を+区切りで指定する（兄弟セレクタ）
<ul>
<li class="first">ここは適用されません。</li>
<li>ここが適用範囲です。</li>
<li>ここは適用されません。</li>
<li>ここは適用されません。</li>
</ul>サンプルコードでは、1番初めのli要素に.firstとというclassが付与されています。
この.firstの次の兄弟要素であるli要素が有効範囲です。
特定の要素以降の要素を~区切りで指定する（兄弟セレクタ）
特定の要素以降にある要素を指定したい場合は~区切りを使用します。
こちらも対象先は兄弟セレクタとなります。
【CSS】特定の要素以降の要素を~区切りで指定する（兄弟セレクタ）
.first ~ li {
color: red;
}【HTML】特定の要素以降の要素を~区切りで指定する（兄弟セレクタ）
<ul>
<li class="first">ここは適用されません。</li>
<li>ここが適用範囲です。</li>
<li>ここが適用範囲です。</li>
<li>ここが適用範囲です。</li>
</ul>サンプルコードでは、1番初めのli要素に.firstとというclassが付与されています。
この.first以降の兄弟要素であるli要素が有効範囲です。
要素と属性値セレクタを区切り文字なしで対象範囲を絞り込んで指定する
要素と属性値セレクタを区切り文字なしで連結指定して対象の範囲を絞り込みたい時に使用します。
複数の条件がそろった場合に適用するという内容なのでコンフリクトが起きにくいのが特徴です。
【CSS】要素と属性値セレクタを区切り文字なしで対象範囲を絞り込んで指定する
.list-item.red {
color: red;
}【HTML】要素と属性値セレクタを区切り文字なしで対象範囲を絞り込んで指定する
<ul class="list">
<li class="list-item">ここは適用されません。</li>
<li class="red">ここは適用されません。</li>
<li class="list-item red">ここが適用範囲です。</li>
</ul>サンプルコードでは、1番目と2番目のli要素にはそれぞれ.list-itemか.redのどちらかのclassしか付与されていません。
今回のCSSでは、.list-itemと.redのどちらのclassも付与されていなければ有効範囲になりませんので3番目のli要素のみスタイルが適用されます。
サンプルではclassですが、IDやその他の属性値指定でも指定することができます。
指定できるセレクタ一覧
指定できるセレクタを一覧でまとめてみましたのでぜひ参考にしてみてください。
| セレクタ名 | 書き方 | 適用される対象 |
| ユニバーサルセレクタ | *(アスタリスク) | すべての要素 |
| タイプセレクタ（要素セレクタ） | 要素名 | <h1>や<p>などの指定した要素 |
| IDセレクタ | #ID名 | ID名が指定されている要素 ※ID名はhtml文書内で１つだけにします。 |
| classセレクタ | .クラス名 | クラス名が指定されている要素 ※クラス名は、html文書内の複数の箇所にあっても良いです。 |
| 属性セレクタ | 要素名[属性名] | 指定した属性を持つ要素 |
| 要素名[属性名="値"] | 指定の属性の値がある要素 | |
| 要素名[属性名~="値"] | 属性の値が複数ある場合で、指定の属性の値がどれかひとつに合致する要素 | |
| 要素名[属性名|="値"] | ハイフン(-)で区切られた属性の値が複数ある場合で、指定の属性の値で始まっている要素 | |
| 要素名[属性名^="値"] | 指定の属性の値で始まる要素 | |
| 要素名[属性名$="値"] | 指定の属性の値で終わる要素 | |
| 要素名[属性名*="値"] | 指定の属性の値が含まれている要素 | |
| 疑似クラス | 要素名:link | まだ見ていないページのリンク |
| 要素名:visited | すでに見たページへのリンク | |
| 要素名:hover | マウスカーソルが重なっているとき | |
| 要素名:active | 要素を選択した時 | |
| 要素名:focus | フォーカスした時 | |
| 要素名:target | 移動先の要素 | |
| 要素名:lang() | lang属性値が指定された言語コードで始まっている要素 | |
| 要素名:enabled | 有効な要素 | |
| 要素名:disabled | 無効な要素 | |
| 要素名:checked | ラジオボタンやチェックボックスが選択されたとき | |
| 要素名:indeterminate | ラジオボタンやチェックボックスが不確定な状態のとき | |
| 要素名:root | ルート要素 | |
| 要素名:first-child | 最初の子要素 | |
| 要素名:last-child | 最後の子要素 | |
| 要素名:nth-child() | n番目の子要素 奇数の行にスタイルを適用 (:nth-child(2n+1)) 偶数の行にスタイルを適用 (:nth-child(2n)) 指定した行にスタイルを適用 (:nth-child (数値)) |
|
| 要素名:nth-last-child() | 後ろからn番目の子要素 | |
| 要素名:only-child | 唯一の子要素 | |
| 要素名:first-of-type | 最初の子要素 | |
| 要素名:last-of-type | 最後の子要素 | |
| 要素名:nth-of-type() | n番目の子要素 | |
| 要素名:nth-last-of-type() | 後ろからn番目の子要素 | |
| 要素名:only-of-type | 唯一の子要素 | |
| 要素名:empty | 子要素や要素内容を持たない要素 | |
| 要素名:not() | 指定の条件と一致しない要素 | |
| 疑似要素 | 要素名::first-line | 最初の1行目 |
| 要素名::first-letter | 最初の1文字 | |
| 要素名::before | 指定した要素の開始タグの後 | |
| 要素名::after | 指定した要素の終了タグの前 | |
| 子孫セレクタ | セレクタ1 セレクタ2 | セレクタ1の子孫のセレクタ2の要素 |
| 子セレクタ | セレクタ1 > セレクタ2 | セレクタ1の子のセレクタ2の要素 |
| 兄弟セレクタ | セレクタ1 + セレクタ2 | セレクタ1とセレクタ2が同じ親要素を持つ兄弟の要素で、セレクタ1の直後にあるセレクタ2の要素 |
| セレクタ1 ~ セレクタ2 | セレクタ1とセレクタ2が同じ親要素を持つ兄弟の要素で、セレクタ1の後にあるセレクタ2の要素 |
まとめ
いかがでしたでしょうか？
CSSのセレクタ指定はたくさんの方法があり初心者の方はすべて覚えるのは大変だと思います。
まずは、基本となる子孫セレクタをマスターして、
ぜひ、みなさんもこの記事を参考に自分の使いやすいセレクタ指定を見つけてみてください。
