.test dev（test div？）とは？

Question

現在CSSを勉強しているのですが、先輩からこのようなアドバイスを頂きました。

------------------------
これ知ってると便利だよ！調べてみて！

.test dev {
   ....
}
------------------------

検索してもうまくヒットせず、「使い方」や「効果」など、一体どんなものかわかりませんでした。

ご存知の方、よかったら教えていただけないでしょうか？

すみませんが、宜しくお願い致します。

ORUKA1951 · Accepted Answer

なるほど・・皆さんの回答を見て .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において　　

見出し

見出し

文章でここは重要A

　で、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名をつけなくてすむのです。それを覚えればね。だから便利なのです。　

hinananana · Answer

こんな感じでしょうか /*--HTML--*/

ここのdivと

ここのdivは同じスタイル

/*--CSS--*/ .test div{ border:solid 2px #dcdcdc; padding:10px; margin:10px; } testの中のdiv全てに適用

ORUKA1951 · Answer

.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{}

で文書内のどこを指定しているとか、詳細度がいくつかなどが理解できるようになること。。

Tacosan · Answer

CSS のセレクタの使い方を知ってると便利だよ, ってことかな.

参考URL：http://msugai.fc2web.com/web/CSS/selector.html

.test dev（test div？）とは？

なるほど・・皆さんの回答を見て

こんな感じでしょうか

.test dev・・・・・そんなの知りません。

CSS のセレクタの使い方を知ってると便利だよ, ってことかな.

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

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

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

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