【CSS】セレクタの書き方一覧【保存版】

本記事ではCSSのセレクタの書き方一覧を例文付きで解説します。

初学者の方、HTML/CSSの基礎学習や見返しに利用いただればと思います。

CSSのセレクタの書き方

セレクタの書き方は「タグ」「クラス名」「id名」を書いて「｛｝」で閉じるの基本です。

基本とはいえ、すべてこのような書き方ではカバー出来ない表現があったり。

記述量が膨大になって、管理が煩雑になってしまうデメリットがあります。

では具体的にどのようなCSSの書き方があるのか？見ていきましょう！

【CSS】セレクタの書き方一覧

まずはCSSの書き方一覧を見てみましょう。

このように「カンマ区切り」や「大なり」などで、表現方法にも種類があります。

※上記以外にも疑似要素の書き方などあります

深堀して知りたい方のために順に解説していきます。

セレクタ,セレクタ｛＊｝（カンマ区切り）

カンマ区切りの書き方を「グループ化セレクタ」と言い、複数のセレクタを指定することが出来ます。

そのため、親要素や子要素、隣にいるかなどの制限はありません。

よく利用することがある書き方です。

具体例はこちら↓

<h2>何色かな</h2>
<p>何色かな</p>
<ul>
　　<li>何色かな</li>
　　<li>何色かな</li>
</ul>

h2 , li｛
color:red
｝

セレクタ セレクタ｛＊｝（半角スペース区切り）

半角スペース区切りの書き方を「小孫結合子」と言い、親子要素または親孫要素のセレクタを指定することが出来ます。

この書き方はその名の通り、親子孫の関係があるので「グループ化セレクタ」のように別のセレクタを選択して指定することが出来ません。

半角スペースとカンマ区切りは見た目が似ているので混同しないように注意したいですね。

具体例はこちら↓

<ul>
　　<li>何色かな</li>
　　<li><a>何色かな</a></li>
</ul>

ul li a｛
color:red
｝

セレクタ>セレクタ｛＊｝（大なり区切り）

大なり区切りは「子結合子」と言い、親子関係にある要素で特定のセレクタだけを指定したい場合に利用します。

孫要素には指定できません。つまり親要素の直下の子要素のみ指定されます。

あまり活躍することがないですが、特殊な指定をしたい場合に利用できます。

具体例はこちら↓

<div>
　　<p>何色かな</p>
</div>
<p>何色かな</p>

div>p｛
color:red
｝

セレクタ+セレクタ｛＊｝（プラス区切り）

プラス区切りは「隣接兄弟結合子」と言い、親子関係にない同じ階層のすぐとなりのセレクタを指定することが出来ます。

大なり区切りと似ていますが、違いは親子関係か？同じ階層か？の違いです。

プラス区切りなのでカンマ区切りと同じ用途と想像しそうですがまったく違う挙動になるので注意。

具体例はこちら↓

<div>
　　<p>何色かな</p>
　　<p>何色かな</p>
</div>

div+p｛
color:red
｝

セレクタ~セレクタ｛＊｝（波ダッシュ区切り）

波ダッシュ区切りは「後続兄弟結合子」と言い、左側に指定したセレクタから右側に指定したセレクタをすべて指定することが出来ます。

右側に指定したセレクタ以降にはCSSは効かないので、左側のセレクタから一番最初の右セレクタまで指定されると覚えておきましょう。

具体例はこちら↓

<p>何色かな</p>
<ul>
　　<li>何色かな</li>
　　<li>何色かな</li>
</ul>

ul*｛
color:red
｝

セレクタ*｛＊｝（アスタリスク区切り）

アスタリスク区切りは「全称セレクタ」と言い、指定したセレクタ以降すべて指定することが出来ます。

セレクタを指定せず「*」だけの記述もでき、この場合はすべてのセレクタを指定することになります。

具体例はこちら↓

<p>何色かな</p>
<ul>
　　<li>何色かな</li>
　　<li>何色かな</li>
</ul>

ul*｛
color:red
｝

最後に

いかがでしたでしょうか。CSSの結合方法を理解できたと思います。

結合方法によってはHTML/CSSのみでもカッコいいサイトが出来たり、JavaScriptに頼らず動きのあるサイトが制作出来ます。

今後も基本的な技術をまとめていきますので、備忘録として活用いただければと思います。

最後までお読みいただきありがとうございました。Taroでした。