セレクタの種類と書き方について
本日の教材動画はこちら
CSSを指定するのに必須なセレクタは、大きく分けて3種類あります。今回はそれぞれの特徴と書き方を見ていきましょう。
1. タイプセレクタ
HTMLタグのこと。HTMLが記載してあれば、適応させるために新しく一文を書き加える必要などはない。今まで使ってきたCSSがこのタイプですね（ h1{～....} みたいなタイプ）
2. idセレクタ
HTML側ではid属性を利用して指定し、CSS側では「＃」を使って選択する。1つのページ中につき一度しか同じ名前は使えないのが特徴。
3. classセレクタ
HTML側ではclass属性を利用して指定し、CSS側では「 . 」を使って選択する。1つのページ中で何度でも同じ名前のものが使えるのが特徴。
idセレクタとclassセレクタの関係性
idセレクタとclassセレクタは共存することができます。例えば「A」というclassの中に、「a」「b」「c」というidを作ることもできます。こうすることで「A」class全体をCSSで指定しつつ、「b」というidだけ装飾を付け加えることが可能となります。
HTMLとCSSでの指定の仕方
タイプセレクタは今まで書いていたタイプなので割愛。今回はidセレクタとclassセレクタの詳しい書き方を見ていきましょう。
【 idセレクタの書き方】
HTML → ＜～…id="〇〇〇"＞ という感じで指定したいタグの中にid名を入れる
CSS → ＃〇〇〇｛～...;｝ という感じで#の後に指定したいid名と指定内容を書く
【classセレクタの書き方】
HTML → ＜～…class="〇〇〇"＞ という感じで指定したいタグの中にclass名を入れる
CSS → .〇〇〇｛～...;｝ という感じで . の後に指定したいclass名と指定内容を書く
タイプセレクタ、idセレクタ、classセレクタを全て使って作ったページが以下になります
