CSSの定義の方法について混乱しています

2014/04/16 01:51

このQ&Aのポイント

CSSの定義の方法について混乱しています。特に以下のサイトで見たサンプルコードについてわかりません。
通常のCSS定義では、クラスやIDを使って要素を指定しますが、上記の方法はどういった意味なのでしょうか。
また、aa.bbといった形式の定義も見かけることがありますが、この文法についても理解できません。

roksy
お礼率48% (50/104)

その他([技術者向] コンピューター)
回答数4
ありがとう数11

みんなの回答 （4）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

ORUKA1951
ベストアンサー率45% (5062/11036)

2014/04/16 13:47 回答No.4

何はともあれ、疑問があれば仕様書を確認する。・・・その上でわからない時に聞く・・・　そうしないと中途半端な一部の情報しかわからないままになってしまいます。 CSS2以降は、基点となるセレクタから書き始めることになりました。すなわち dl#sample1 dl,dt,dd {} でいうと dl#sample1 dl dt dd のそれぞれに対して、指定しているわけです。,は「グループ化」です。 dl#sample1 dl 　はdlが基点となるセレクタですからsampleという一意セレクタを持つdl要素　' '半角スペースの子孫セレクタが続いていますから、意味は sample一意セレクタを持つdl要素の子孫のdl要素と言う意味になり、詳細度は [0,0,1,2]になりますね。 dt とddはタイプセレクタですから、いずれも詳細度は[0,0,0,1]になります。＞　．class{　　　や　#id　{　など　．や#　で始まるはずですが、　いいえ、それは逆です。　本来は、*.classや*#idと書く----詳細度は[0,0,1,0][0,1,0,0] 　・・・*は全称セレクタで、詳細度は0です。CSS1との整合性のために設けられました。 ※そのうえで、「全称セレクタが単体セレクタの唯一の構成要素でない場合、"*"を省略してよい。( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/selector.html )」　ということです。あくまでCSS1の書き方を解釈するために設けられた解釈であって、本来の書き方ではありません。＞cssの本を見ても書いていないし、こういう定義の文法がわからないのでお願いします。　クズ本と言うだけです。 4 構文と基本データ型 5 セレクタ 6 プロパティ値とカスケーディング、継承の割り当て　は、メディアごとのプロパティの説明より前に書かれています。・Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification[邦訳]( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/cover.html ) ★CSSは、Cascading Style Sheetsの略です。当然、セレクタやカスケーディングの仕組みがあればこそのスタイルシートですのに、「セレクタやカスケーディングの仕組み」という命ともいえる部分を説明していない参考書は「クズ」です。・・と断言できます。　ただ、この指定は通常は dl#sample1,dl#sample1 dt,dl#sample1 dd{} とすべきじゃないかと思います。　samle1のIDをもつdl要素の子孫であるdt、およびdd要素　他の場所でこれら(dt,dd)の要素が出てきたときに、このスタイルが適用されてしまいます。dl要素の下位に、またdl要素があるというのも変です。 ★スタイルシートもですが、HTMLの書き方も身についていないような気がします。　idやclass名はDIVやSPANに限らず、「文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )」ためのものであって、スタイルシートのために書くものではありません!!。　具体的には、 <body> 　<div class="header"> 　　<div class="nav">ナビゲーション</div> 　</div> 　<div class="section"> 　　・・・本文　　<div class="aside">この記事と直接関係ない記事</div> 　</div> 　<dl 　<div class="footer"> 　　この文書のfooter 　</div> </body> とかになり、その上で div.header div.nav dl, div.header div.nav dt, div.header div.nav dd{} と指定するのが本来の方法スタイルシートもHTMLも一度・・通しで読んでおかれるほうが、早道ですよ。 ★HTML 4.01仕様書( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/cover.html ) ★Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/cover.html ) 　

質問者

お礼 2014/04/21 18:06

総合の定義と扱いの説明があるのですね。ちょっと訳なので読みにくいですが、こういうものを探していました。市販の本にあればもっと良かった。全体にかなり理解が進みました。

その他の回答 (3)

Zilant
ベストアンサー率38% (29/75)

2014/04/16 08:36 回答No.3

『子孫セレクタ（Descendant selectors）は、空白類で区切られた、2つ以上の単純セレクタから構成されています。祖先-子孫関係から要素をマッチさせるのに使います』『セレクタは,コンマで区切って、グループ化する事が出来ます』なので h1 > b #z79h, h2[style] b, h1 + em.env, h2 * em, dl#sample1 dl,dt,dd{ color: red } と、途中で改行しても「複数のセレクタを１つの定義に纏める」ということができます。

saintandre
ベストアンサー率31% (194/607)

2014/04/16 08:12 回答No.2

「dl要素でidがsample1のものの下位要素のdl要素」と「dt要素」と「dd要素」ですねただしidは通常1要素だけですのであまりこういう指定のしかたはしませんがそもそもdt要素とdd要素への指定が明らかに浮いてるので下記のようにしたかったような気もします dl#sample1 dl,dl#sample1 dt,dl#sample1 dd

質問者