Topスタイルシートの基本基本ルール > セレクタの基本

セレクタの基本

スタイルシートは、まずスタイルシートの適用先を書いて、それに続く「{}」の中で具体的なスタイルを記述する形になっています。
最初はちょっとなれない事もありますが…慣れるとすごく便利です。


要素名をそのままセレクタとして指定する場合

適用先 {適応したいスタイルシート}
※適用先を「*」(アスタリスク)にすることで、全ての要素を適用対象と出来ます。
※適用先が複数ある場合は「,」(カンマ)で区切ると一緒に指定できます。

body {color:red }

 ※ボディ(つまりページ全体)の文字色を「red」にせよ

h1,h2,p {font-size:1em }

 ※h1,h2,pの文字の大きさを「1em」にせよ

IDセレクタ

#属性名  {}
※「id」属性の値が指定されている要素を適用対象としてスタイルを指定できます。
※要素名に続けて書く事で適用対象を限定できます。

たとえば、

「<p id="red">ここにはたくさんの<span id="red">文字列</span>があります。 </p> 」

の場合、

 ※「#red」で指定した場合は、全ての文字列にスタイルシートが反映。
 ※「span#red」で指定した場合は、「<span id="red">」で囲まれた、「文字列」のみがスタイルが反映。

クラスセレクタ

.属性名  {}
※「class」属性の値が指定されている要素を適用対象としてスタイルを指定できます。
※要素名に続けて書く事で適用対象を限定できます。

たとえば、

「<p class="red">ここにはたくさんの<span class="red">文字列</span>があります。 </p> 」

の場合、
 ※「.red」で指定した場合は、全ての文字列が反映。
 ※「span.red」で指定した場合は、「<span class="red">」で囲まれた、「文字列」のみがスタイルが反映。

設定するセレクタを限定したい場合
適用先を指定する際に、「要素Aの中の要素B」を指定したいときがあります。

「 」半角スペースで区切れば、要素の中の要素も指定できます。

たとえば、

#header .navi ul

と設定した場合
 ※「#header 」が指定された中の「.navi」が指定された中の「ul」タグ、となります。

「セレクタの基本」関連本

Akasa Rira
みつけたきせき