idとclassの使い分け

idセレクタとclassセレクタ。
まず大きな違いとしてidは、一つの文書内で同じ名前は1回だけ使用できます。
比べてclassは、同一名でも複数回使用できます。
また、CSSの適用の優先度に違いがあり、id>classの優先順位となります。

.blue {
color:#0000FF;
}

#red {
color:#FF0000;
}

<div class="blue">
<p id="red">赤色になります。</p>
</div>

上記例では id=”red”が優先され、テキストは赤色になります。

そしてidとclassの使い分けについてですが、

<div id="header"></div>
<div id="contents">
 <h1></h1>
 <p class="section"></p>
 <p class="section"></p>
 <p class="section"></p>
</div>
<div id="footer"></div>

上記例のようにidはヘッダーやフッタといったどのページにもあり、
同一ページ内では一度しか登場しないもの。
classは同一ページで繰り返して登場する要素に。
このようにして使い分けると良いようです。

コメントを投稿する