class属性を使ったスタイルの適用例
スタイルを適用する方法として「class」を使う場合は、次のようなソースになります。
スタイルシートの class と id の違いと使い分け
■HTML：
クラスを使った例
■スタイルシート：
p.sakura { color: red; }
対象の要素名とclass名との間に半角の「.」(ドット)記号を記述します。要素名は省略することもできます。上記では「p」が要素名で「sakura」がclass名です。
id属性を使ったスタイルの適用例
スタイルを適用する方法として「id」を使う場合は、次のようなソースになります。
■HTML：
アイディーを使った例
■スタイルシート：
p#tomoyo { color: red; }
対象の要素名とid名との間に半角の「#」(シャープ)記号を記述します。この場合も、要素名は省略できます。上記では「p」が要素名で「tomoyo」がid名です。
スタイルが適用される優先順位にも差が付けられています。
class属性とid属性の役割の違い
「class」と「id」の役割と、使用上の違いを簡単に言うと、次の通りです。
■class：
「種別名を割り当てる」
→ 同じclass名を、1ページ中に何度でも使える。
■id：
「固有の名前を割り当てる」
→ 同じid名は、1ページ中に1度しか使えない。
class属性とid属性の違い
■全部にclass属性を使っても構わない
■同じid属性値を2回以上使ってはダメ
CSSでは、装飾内容が重複(バッティング)した場合には、原則として「後に記述された方」が採用されます。
.sakura { color: blue; }
.sakura { color: red; } // こちら側が適用される
「class側とid側とで装飾内容がバッティングした際にはid側が優先される」という規則があるため、(記述順に関係なくid側の方が優先されて)対象要素は青色で表示されます。
tomoyo { color: blue; } // こちら側が適用される
.sakura { color: red; }