idとclassの指定方法

Question

id(class)の指定は、セレクタといっしょに指定（１）、セレクタを除いて指定(２) どちらが正しいというのはあるのでしょうか？【例】タイトル　　　　　

サンプル

(1) div#sample p { color:#f00; } (2) #sample p { color:#f00; } どちらでも良いような気がしますが、実際の所どうなんでしょうか。

noname#158634 · Accepted Answer

ほかのHTML内に「div以外のid="sample"」が出現することが100%無いとは言えませんよね？
それを踏まえるとdivから書く「ほうがいい」ということが明らかにわかると思います。
余談ですが私は「div以外のid="sample"が出現することが100%無い」ようにHTMLを書くほうが自分には楽なのでタグ名からは書きません(笑)タグ名での指定、IDでの指定、クラス名での指定のみを使用しています。

＞そうなんですか？色々なサイトや参考書では一意に特定する場所には
＞idを指定するとの解説を見かけるんですがこれは間違いなんでしょうか？
これはHTML側の都合で、同一のHTMLファイル内に同じIDが重複してはいけないということからの派生の考えですね。これも、上記と同じく、「そういうふうに(一意に特定する場所にはclassではなくidを指定)したほうがいい」のは明らかですが、あとは仕様に反していなければいい、ということになります。

なお、表現で分かっていただけるとは思いますが以上はあくまで現実問題での話です。質問者さんが仕様ガッチガチでいきたいのなら、上記のような「現実を踏まえた、文法違反だけはしていない」記述よりも、仕様を読んでそれに厳密に従う書き方をすべきです。

ORUKA1951 · Answer

＞つまりこれはidを使ってしまうと、idが違うだけで同じスタイル複数書いてしまう事になるよってことですよね。確かにそうですね。　たくさん作成していると、こういう細かいところも随分と賢くなりましてね。　IDは、とかに残しておいて、classをうまく使って、適用させたい要素を指定するほうが便利なのです。

あるいは、

　classの値は、「半角スペースで区切っていくつでも書ける」という特性がありますし、詳細度が高くすればいくらでも上書きさせられる。　私は、HTML内のあるブロックのスタイルがスクロールなしですべて理解できるように短くまとめるようにしています。でないと、CSSがどんどん肥大化して後で修正するときに地獄になります。そのためには、idよりclassのほうが本当に楽です。　いずれにしても、大事なことはスタイルシートではなくHTMLのマークアップです。それさえきちんと出来ていれば、 div.header div.abstract{margin:0 1em;border:solid 1px solid;} div.section div.tableContent{position:absolute;left:0;top:0;width20%} とCSSを書くことが出来ます。これだと誰(数年後の自分)が見ても何をしようとしてるかわかるでしょう。 #left{position:absolute;left:0;top:0;width20%} じゃ、HTMLを開かなくちゃならない。・・・すこし本題と外れますが・・・　

ORUKA1951 · Answer

No.1です。＞この場合、上部（header）も、サイドバー（sidebar）も、1ページ中に2度以上登場することはありません。かならず1度だけです。このような場合に、idを使います。　そんなことはありません。HTML5の仕様書を見ればわかるように、headerもfooterも何度も登場して構いません。　headerとは完結した記事のヘッダー、footerはフッタですから・例] 4.4.9 The footer element( http://www.w3.org/TR/html5/sections.html#the-footer-element )

見出し

リンク

本文

段落

　　　　記事　　　

　とか・・・私がidをスタイルの指定に使わない理由はいくつかあります。・IDはリンクターゲットとして使うため、　　

　のとき、困るでしょう。目次のソースを編集するとき具体的にその内容がわかるIDをつけたほうがよいのです。　　

HTMLとは

HTMLの書き方

と書くでしょ？　　　　

　のとき、　　div.header div.nav{} 　　div.section div.nav{} 　で区別できます。　もちろんサイドバー　sidebar　本文領域　 main　　　

～

　という意味のない書き方もしません。デザインのためにclass名やidをつけることはありません。idやclass名は『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』と仕様書に書かれています。HTML4では、これ以上の明確な例はありませんでした。ナビゲーション

～

本文領域　　　　

～

・・・HTML5だと、それを明確にナビゲーション本文　　　　　　

　となります。3.1. 新しい要素 ( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )が良い参考になるでしょう。＞>その変わり、特定の部分のデザインを変えたいときがあれば、そのHTMLの内に書きます。　ほとんどないのですが、多くのページでセットになっている場合、特定のページのみに適用させるスタイルは、共用のスタイルシートに書くと煩雑になり後日のメンテナンスが悪くなるので、head内(HTML)、あるいは(XHTML)で追記しています。この場合は#を使うことが多いですね。・idでは、詳細度が高すぎます。　idでは、詳細度がb=2となり、なかなか上書きがしにくくなります。　私のページの作り方にも一因はあるのですが、多くのページで構成される場合、最初にすべてのページをひとつにまとめたものを作成し、それを利用しやすいようなサイズに分割して一連のページを作ることが多いです。全体のデザインを統一し、スタイルシートを簡素化する目的もあります。その場合、必然的に一箇所だけスタイルを指定しなければならない必然性はなくなります。大きなページは、ページ数や目次を印刷するように印刷用スタイルシートを設定して残しておきます。 [例]書きにくいのでHTML5で書きます　

↓分割　

　この場合、idではデザインできないことが理解いただけるかな？　 ★いずれにしてもIDは出来るだけ内容がわかるものにすると一意な物になりますが、デザインは共用したいとなると、IDよりclassのほうが適している。　一箇所しか登場しなくてもclass名で用が足りるならclassを使う。classには、リストが使えるという利点があります。属性セレクタ[class~=""}と同じ意味を持つので・・

div.section{margin:0 auto;width:70%;border:solid 1px gray;} div.section div.section{width:100%;margin:0;} div.important{border-color:red;} div.section.memo{color:green;} とか、classを使うと、圧倒的にプロパティを書く量を減らせます。IDを使うとき結構他と共通な設定を書いてますよ。 classをうまく使うと、本当にスタイルシートは小さくなります。そしてわかりやすくなる。

Tacosan · Answer

CSS の「{」の前にあるのがセレクタだから, 「セレクタといっしょに指定」とか「セレクタを除いて指定」というのは全く持って意味不明. さらにいえば, 「正しい」というのがいかなる価値基準におけるものなのかも不明.

id に対しては, その CSS を他のファイルと共用するならタグをつける必要性もあるかもしれません. 共用しなければ, タグは完全に冗長なだけです.

class なら CSS を他のファイルと共用するかどうかにかかわらずタグをつける意味はあります. ただし, そんなことするくらいなら別のクラスにしろという意見もあり得る.

ORUKA1951 · Answer

意味が違いますから、必要に応じて使い分けます。

　CSS1は、.classNameと言う書き方でしたが、CSS2以降は基点となるセレクタを最初に書きますから*.classNameが本来の書き方です。*は詳細度0とします。
　CSS2では、基点となる*が省略することができるとされていますから
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
The universal selector, written "*", matches the name of any element type. It matches any single element in the document tree.
If the universal selector is not the only component of a simple selector, the "*" may be omitted. For example:
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Selectors( http://www.w3.org/TR/CSS2/selector.html )］より
　私は紛らわしくなる--他のセレクタの書き方と統一するため*は書いています。

div.nav *{display:block;}
とかもあるので、

　意味は、class属性の値が半角スペースで区切られて配列であるとき、そのひとつににclassNameの値を持つ、すべての要素と言う意味になります。クラスセレクタは詳細度c=1,IDセレクタは詳細度b=1になります。
div.section div.section ol li.abc{}は、詳細度0,0,2,4になります。

　#、すなわちID(一意)セレクタの場合は、詳細度がb=1で、適用されるHTMLがひとつの場合は問題になりませんが、複数ある場合は必要に応じて書きます。
　ただ、#(一意)セレクタは、スタイルシートであまり使う機会のないセレクタだと思います。--私もまず使いません--

　もし、タイプセレクタを前につければ、同じIDが異なるページで使用されているときぐらいでしょう。
[HTML1]
・・・
<div class="section" id="section1">
　<h1>見出し</h1>

[HTML2]
・・・
<div class="article" id="section1">
　<h1>見出し</h1>

とか、ですか？

★HTMLがきちんと書かれていれば、IDをスタイルシートで使用する機会は少ないでしようね。
　その変わり、特定の部分のデザインを変えたいときがあれば、そのHTMLの<head></head>内に書きます。
★class名は、必ず書きます。そのほうが後から見てわかりやすい。
div.memo{font-size:0.9em;border:solid 1px gray;}/* 詳細度0,0,1,1 */
div.section div.memo{margin:1ex 1em;border-color:blue;}/* 詳細度 0,0,2,2 */
div.annotation div.memo{margin:0.5ex 0.5em;border-style:dotted;}/* 詳細度 0,0,2,2 */

(1)
div#sample p {
color:blue;
}

(2)
#sample p {
color:red;
}
の場合、いずれの色になりますか？？？青ですね。

見出し

[HTML2] ・・・

見出し

とか、ですか？ ★HTMLがきちんと書かれていれば、IDをスタイルシートで使用する機会は少ないでしようね。　その変わり、特定の部分のデザインを変えたいときがあれば、そのHTMLの内に書きます。 ★class名は、必ず書きます。そのほうが後から見てわかりやすい。 div.memo{font-size:0.9em;border:solid 1px gray;}/* 詳細度0,0,1,1 */ div.section div.memo{margin:1ex 1em;border-color:blue;}/* 詳細度 0,0,2,2 */ div.annotation div.memo{margin:0.5ex 0.5em;border-style:dotted;}/* 詳細度 0,0,2,2 */ (1) div#sample p { color:blue; } (2) #sample p { color:red; } の場合、いずれの色になりますか？？？青ですね。

idとclassの指定方法

ほかのHTML内に「div以外のid="sample"」が出現することが100%無いとは言えませんよね？

＞つまりこれはidを使ってしまうと、idが違うだけで同じスタイル複数書いてしまう

No.1です。

CSS の「{」の前にあるのがセレクタだから, 「セレクタといっしょに指定」とか「セレクタを除いて指定」というのは全く持って意味不明. さらにいえば, 「正しい」というのがいかなる価値基準におけるものなのかも不明.

意味が違いますから、必要に応じて使い分けます。

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング