css 記述法

質問

段組を作るとき、divのブロック要素を用いると思いますが。そこで質問です。
例えば以下の例のとき

<div class="test">
<!--ブロックの内容-->
</div>

divブロック要素でクラスセレクタ指定をしたとします。
その際、cssに記述するとき

div.test {
　内容
}

と書くのが、正しいのか？

.test {
　内容
}

と書いても正しいのか？
どちらが正しいんでしょうか？
先頭にdivを書かなくても、普通に表示されるんですけど。
ただ、たまに親子要素の関係か、指定した文字より更に小さくなってしまうときもあります。これはきちんと、divを先頭につけていなかったからなんでしょうか？
ご存知方、よろしくお願いします。

回答No.2

elttac · ベストアンサー

結論は，「CSS としてはいずれも正しい」です。ただし，意味するところが異なります。

　セレクタ「div.test」は，「class 属性に test を含む div 要素」としか合致しません。一方，「.test」は，「class 属性に test を含む要素なら何でも」合致します。「<div class="test">...</div>」に対して，いずれのセレクタも合致し，その中の宣言が適用されえます。
　上述のように「合致する要素の種類が違う」ほかに，これは，カスケーディング順位に影響を及ぼします。詳細は省きますが，一般に，「div.test」のほうが強く適用する要素を絞り込んでおり，「.test」よりも高いカスケーディング順位を得ます。
　質問でおっしゃっている「div を先頭につけていなかったからなんでしょうか？」で生じるトラブルは，質問者様がカスケーディングを考慮されていない，または計算を間違っていたことが原因でしょう。

　ちなみに，No. 1 のご回答にあります，「div[class~=test]」（または「div[class~="test"]」）は，属性セレクタといい，クラスセレクタのように属性値で絞り込むセレクタを一般化したもので，CSS2 から導入されたものです。
　クラスセレクタと，属性セレクタ，いずれも正式なものです。HTML・XHTML については，class 属性で絞り込むものが，「クラスセレクタ」という特別な形で用意されていると考えるのがよいでしょう。

　セレクタとカスケーディングに関して理解されていないようにお見受けしますので，たとえば参考 URL の「Hop step CSS」あたりをご覧になるとよいと思います。

参考URL：

http://www.tg.rim.or.jp/~hexane/ach/

お礼

ありがとうございます。
勉強になりました。
更に知識を深めていきたいと思います。

回答No.1

cyokokichi

正式は、div[class~=test]です。
ただ、HTMLの場合は、div.testと省略した形で書くことも出来ますし、.testと書くこともできます。
この場合、div.testと.testではマッチする要素に差が出ます。
例えば、
div.testは<p class="test">
にはマッチしませんが、
.testは<p class="test">にマッチします。
さらにセレクタの詳細度が違ってきます。
例えば、
div.test{font-size:5px}
.test{font-size:10px}
と書いた場合フォントのサイズは5pxになります。

参考URL：

http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/selector.html

お礼

ありがとうございました。
勉強になりました。