・CSSってよく聞くけど、「セレクタ」って何？
今回は、セレクタとは何か？初心者が知っておきたい３つのセレクタを優しく解説します。
・このブログを読む前にこれを読めばさらに理解する記事↓
これで完璧！外部 CSS の作り方完全ガイド
class と id の違いを めちゃくちゃ分かりやすく解説！
「セレクタ」ってなに？
・CSSの「セレクタ」はココ！！
・セレクタとは、「どのHTMLにスタイルをあてるか」を決めるためのもの！
タグセレクタとは
【 コード を使って説明するよ！】
htmlコードに <h1>絶品カレーの作り方</h1> とあります。
CSS コードで h1は 青色にしてね とスタイル指定します。
結果、h1 の要素は青文字で表示されます。
セレクタとは「どのhtmlにスタイルを決めるためのもの」なので、「どのhtml？」の部分は、 h1 タグになります
なので、ここでは h１タグがセレクタになり、これを「タグセレクタ」と言います
クラスセレクタとは
htmlコードの中に、class名前の付いたコードがあります
CSSでスタイル指定します。
クラス名 .text-brown は「文字色を茶色で、文字サイズは24pxにしてね」と指定しています
このように指定されたスタイルで表示されます。
セレクタは、クラス名である .text-brown になり、これを「クラスセレクタ」と言います
class名を使ってCSSでスタイルを指定するときは、必ずドット . を付けます
IDセレクタとは
次は「 id 」を使ったセレクタをコードを使って説明します。
・id 名を tokubetu（特別）と名付けてみました。笑
CSSの記述は以下のようになります↓
セレクタは、id名である #tokubetu になり、これを「idセレクタ」と言います
お分かりだろうか？「クラスセレクタ」と「idセレクタ」の違い
クラスセレクタの場合は、「ドット . 」 idセレクタの場合は 「シャープ # 」を付けます
まとめ
・セレクタとはCSSのココのこと↓
・初心者に覚えてもらいたいセレクタは３つ
「タグセレクタ」→タグのみ
「クラスセレクタ」→ドット . をつける
「idセレクタ」→シャープ # をつける
次回は 優先度について学習します
コメント