ベストアンサー

.test dev（test div？）とは？

2011/06/23 11:21

現在CSSを勉強しているのですが、先輩からこのようなアドバイスを頂きました。 ------------------------ これ知ってると便利だよ！調べてみて！ .test dev { .... } ------------------------ 検索してもうまくヒットせず、「使い方」や「効果」など、一体どんなものかわかりませんでした。ご存知の方、よかったら教えていただけないでしょうか？すみませんが、宜しくお願い致します。

888-33-ange
お礼率100% (20/20)

CSS
回答数4
ありがとう数5

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

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

ベストアンサー

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

2011/06/23 20:22 回答No.4

なるほど・・皆さんの回答を見て .test div・・・子孫セレクタの意味ですね。セレクタの基本は、単純セレクタを接続子でつなげて適用対象を特定する　単純セレクタ　　　タイプセレクタと全称セレクタのこと(タイプセレクタとはHTMLの要素名) 　　　例) body　　p 　　　単純セレクタに擬似要素や擬似クラスをつけて使うこともある　　　タイプセレクタは詳細度1、全称セレクタは0 　それにつながるセレクタ　　子孫セレクタ　半角スペースです。　　　　body div.section p{}と言うふうに使う　　　　div.section div{}でその子孫末代までdivに適用される。　　子セレクタ　　>です。　　　　body>divの場合、body div divには適用されない。直接の子孫一代のみ　　隣接セレクタ　+です。　　　　兄に+がいるpだけに適用　　属性セレクタ単純セレクタ[attr~=value][attr][attr=value][attr|=value]など　　　　詳細度は10あります。　　　　例) a[name]{} 属性にnameをもつa要素に適用　　　　例) div[class~=test]　class属性の値が半角スペースで区切られているとき　　　　　　そのうちのひとつが一致するとき　class属性については　　　　　　div.testとまったく同じ意味を持つ　　クラスセレクタ　　　 [class~=value]の意味　　　　詳細度は10 　　一意セレクタ　[id=value]と同じ、#valueとかく　　　　例) p#test 　　　　詳細度は100になる。ひとつの文書に一度しか現れないので単純セレクタを　　　　省略して#testでもよいが、複数の文書に共通のスタイルシートを適用する　　　　ことも考えれば、div.section h2#testとしておくほうが無難かも　　擬似クラス:first-child,:hoverなど　　　　詳細度10 　　擬似要素:first-letter :first-lineなど　　　　詳細度1 たとえば、次のようなウェブ標準マークアップされたHTMLにおいて <body> 　<div class="header"> 　　<h1>見出し</h1> 　</div> 　<div class="section"> 　　<h2>見出し</h2> 　　<div class="section"> 　　　<h3>見出し</h3> 　　　<p>文章でここは<em>重要A</em></p> 　　</div> 　</div> 　<div class="footer"> 　　<p>ここは<em>重要B</em></p> 　　<p>ここは<em>重要C</em></p> 　</div> </body> で、em{text-decoration:under-line;}ですべてのemに下線が引かれます。(詳細度は1ですね) 　div.footer em{color:red}でfooter内のemがすべて赤くなります。詳細度は12ですね。　div.footer p+p em{font-weight:bold;}でCのみ太字になります。詳細度は14ですね。　div em{color:green}だと、詳細度が2ですから、Aは緑になりますが、BとCは、詳細度12で赤に指定されているので上書きされませんね。　このようにセレクタをつなげて、不必要なidやclass名をつけなくても、特定の場所を特定できるのです。　この仕組みがカスケーディングの要のひとつです。従来のようにHTML作者がデザインを考えなくて、文書構造だけに専念してマークアップできるようにするためです。★HTMLにデザインのためにclass名やid名をつけなくてすむのです。それを覚えればね。だから便利なのです。　

質問者

お礼 2011/06/24 11:25

すみません、初心者でしてちょっと難しかったです（；_；）今後勉強しつつ、何度かこのご回答を読み返していきたいと思います（＾＾）ただ「このようにセレクタをつなげて・・・」から始まる最後の文は非常にわかりやすかったです！セレクタについて理解が足りなかったのだなと、皆様から頂いたご回答からわかりました。どうも丁寧にご説明いただきありがとうございます！

その他の回答 (3)

hinananana
ベストアンサー率69% (16/23)

2011/06/23 14:50 回答No.3

こんな感じでしょうか /*--HTML--*/ <div class="test"> <div> <p>ここのdivと</p> </div> <div> <p>ここのdivは同じスタイル</p> </div> </div> /*--CSS--*/ .test div{ border:solid 2px #dcdcdc; padding:10px; margin:10px; } testの中のdiv全てに適用

質問者

お礼 2011/06/24 11:20

わかりやすく書いてくださってありがとうございます！初心者なので、がんばって勉強していきたいと思います！

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

2011/06/23 14:47 回答No.2

.test dev・・・・・そんなの知りません。そもそも、.testって書かれていたとき、それが意味することわかってますか？時々と言うか、オーサリングツールを作ったりすると出力されたりするセレクタですが、これはCSS2では *.test の略とみなされます。【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから 5.3 Universal selector 　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: ・ *[lang=fr] and [lang=fr] are equivalent. ・ *.warning and .warning are equivalent. ・ *#myid and #myid are equivalent. ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Selectors( http://www.w3.org/TR/CSS2/selector.html#universal-selector )］より「universalセレクタが単純セレクタの唯一の構成条件ではない時、アスタリスクを省略することができる。」ということです。省略形だということを理解していないと本来の使い方ができません。　本来は、div.section単純セレクタ(*とタイプセレクタ)につなげて使うのです。さらに、この.と言う結合子は、div[class~=section]の省略でCSS1とCSS1と整合させるために使われています。　私は100%、.testなんて書き方はしません。必ず単純セレクタにつなげて使用します。ですから.test dev???(devはわかりませんがtypeのことかも)は、覚える必要のない書き方だと Selectors ( http://www.w3.org/TR/CSS2/selector.html ) セレクタ ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/selector.html ) をしっかり読んで、 Assigning property values, Cascading, and Inheritance ( http://www.w3.org/TR/CSS2/cascade.html ) 値の割り当て、カスケード処理、継承 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cascade.html ) を読む。最低限　div.section.body p+p em{} で文書内のどこを指定しているとか、詳細度がいくつかなどが理解できるようになること。。

質問者