こんにちは朱夏です。
今回はCSSのセレクタの書き方をまとめてみます。
CSSのセレクタはどうやって書くのがいいんだろう。
今回はセレクタの基本的な書き方、応用編としてセレクタを組み合わせた複雑な指定方法などをまとめてみました。
CSSを学習する上での一助となればと思います。
それではいってみましょう。
セレクタの基本的な書き方
セレクタの書き方(応用編)
あとがき
セレクタの基本的な書き方
CSSでセレクタを書く場合は、基本的に以下の3つの方法を使います。
- idを指定
- classを指定
- 要素を指定（h1、divなど）
それぞれの特徴を以下にまとめておきます。
1.idを指定
idを指定する場合、セレクタの書き方は以下の様になります。
#idname {/* 処理を書く所 */}
idを指定する場合、頭に「#」を付けて使います。
特徴は以下。
優先的に指定できるスタイルですが、1か所にだけしかスタイルを指定できないものになります。
2.classを指定
classを指定する場合の書き方は以下の様な感じです。
.classname {/* 処理名を書く所 */}
classを指定するときは「.」を付けて書きます。
こちらの特徴は以下です。
一番使いやすいセレクタかと思います。
同じスタイルを付けたい要素に対してclassを書いておけば、一括してスタイルを付ける事が出来ます。
要素を指定（h1、divなど）
要素をセレクタとして指定する場合の書き方は以下の様になります。
div {/* 処理を書く所 */}
要素をセレクタにする場合はそのままdivやh1などの名前をそのまま書きます。
要素を指定する場合の特徴は以下です。
セレクタの書き方(応用編)
セレクタの書き方の応用編として、複数のセレクタを組み合わせて書く書き方があります。
書き方のパターンとしては以下の様なものがあります。
- 記号無し（例：div span {/*処理を書く所*/}）
- >を使用（例：div > span {/*処理を書く所*/}）
- +を使用（例：div + p {/*処理を書く所*/}）
- ~を使用（例：div ~ p {/*処理を書く所*/}）
- ,を使用（例：div , h1 {/*処理を書く所*/}）
それぞれについて解説していきます。
記号無し
記号無しで組み合わせる場合は以下の様な意味になります。
意味：divタグの中にあるすべてのspanタグにスタイルを指定する
使用例として以下のサンプルを置いておきます。
See the Pen
ExjBRax by 朱夏 (@syunatsu1)
on CodePen.
最初に指定したセレクタの中にあるものであれば、直下のものでなくても全てにスタイルが適用されます。
サンプルでいうと、divの中にあるspanであれば、pの中にあるspanでもスタイルが適用されます。
>を使用
>を使用したセレクタの書き方は以下の様になります。
意味：divタグ直下の全てのspanタグにスタイルを指定する
記号無しの場合と似ていますが、こちらは直下のものにだけスタイルが適用されます。
サンプルはこちら。
See the Pen
oNXryZB by 朱夏 (@syunatsu1)
on CodePen.
+を使用
+を使用する場合のセレクタの書き方は以下の様になります。
意味：divタグ直後のpタグにスタイルを指定する
上位セレクタの直後に書かれたセレクタのみスタイルを指定する事が出来ます。
サンプルは以下になります。
See the Pen
abOgKXp by 朱夏 (@syunatsu1)
on CodePen.
いくつかのサイトを参考にして情報を集めていましたが、親のセレクタに「隣接する」セレクタに対してスタイルを適用するという説明がありました。
しかし、実際にスタイルが適用されたのは、「直後」に指定したセレクタが配置されていた場合のみで、「直前」のものは影響しませんでした。
~を使用
~（チルダ）を使用したセレクタの書き方は以下の様になります。
意味：divタグより後の、同じ階層にあるpタグ全てにスタイルを指定する
どんな感じになるのかは、実際にサンプルを見てもらった方がイメージしやすいかと思います。
See the Pen
bGdPjGP by 朱夏 (@syunatsu1)
on CodePen.
同一階層であれば、divタグ以降どこにpタグを書いてもスタイルが適用されます。
しかし、1つでも階層がずれるとスタイルは適用されません。
,を使用
,を使用したセレクタの書き方は以下の様になります。
意味：divとpタグ全てにスタイルを指定する
複数の異なったセレクタに、同じスタイルを指定したい場合などに使われます。
サンプルは以下です。
See the Pen
WNvqKwN by 朱夏 (@syunatsu1)
on CodePen.
例ではdivセレクタとh1セレクタの全てにスタイルが適用されます。
あとがき
というわけで、セレクタの書き方をまとめてみました。
今回のまとめは以下です。
- 要素はそのままセレクタになる
- classは「.」を付ける
- idは「#」を付ける
- セレクタを組み合わせて指定する方法
- *は全選択のセレクタ
気付いた方もいたかもしれませんが、同じ場所にスタイルを適用したい場合でも、複数のセレクタの書き方があります。
その中でもメンテナンス性、拡張性などを考えたうえで最適なセレクタの書き方が出来る様になりたいですね。
今回は以上です。
次回もよろしくお願いします。
