- ベストアンサー
.test dev（test div？）とは？
現在CSSを勉強しているのですが、先輩からこのようなアドバイスを頂きました。 ------------------------ これ知ってると便利だよ！調べてみて！ .test dev { .... } ------------------------ 検索してもうまくヒットせず、「使い方」や「効果」など、一体どんなものかわかりませんでした。 ご存知の方、よかったら教えていただけないでしょうか？ すみませんが、宜しくお願い致します。
- 888-33-ange
- お礼率100% (20/20)
- CSS
- 回答数4
- ありがとう数5
- みんなの回答 （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名をつけなくてすむのです。それを覚えればね。だから便利なのです。
その他の回答 (3)
- hinananana
- ベストアンサー率69% (16/23)
こんな感じでしょうか /*--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全てに適用
お礼
わかりやすく書いてくださってありがとうございます！初心者なので、がんばって勉強していきたいと思います！
- ORUKA1951
- ベストアンサー率45% (5062/11036)
.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
- ベストアンサー率23% (3656/15482)
CSS のセレクタの使い方を知ってると便利だよ, ってことかな.
お礼
このリンク先、すごく勉強になりました！ ありがとうございます（＾＾*）
関連するQ&A
- m.dev.dtpf.jp の正体は？
先程firefoxでOKWaveにアクセスしたところ、「http://m.dev.dtpf.jp の "Auth Required" に対するユーザ名とパスワードを入力してください」というダイアログが現れるようになりました。 それまでは、IEで広告のない地方自治体のサイトを見ていました。 検索してみると、下記サイトだけが見つかりました。 http://q.hatena.ne.jp/1371563189 私は現在のところWin８を使用中ですが、スマホでもMacでも症状が現れているようです。 こうなるとLinuxを起動させて探るというわけにも行かず。 皆さんのPCではいかがですか？ マルチプラットフォームということで、怪しいのはやはりJAVA？ 放置で改善されると思いますか？(「はてな」では、出なくなった方もおられる模様です) そもそもhttp://m.dev.dtpf.jpって何しているところ？(ご存じの方だけ回答ください。決してアクセスしないように) 「レジストリに干渉している」とコメントしている方が居ますが、そういうタイプならMacやスマホでは現れないのでは？
- ベストアンサー
- ネットワーク
- body>div{}の意味を知りたい
body>div{}の意味を知りたい サイト作成を勉強中です。初心者の質問で申し訳ないのですが、 よろしくお願い致します。 cssのタグは通常、「body {}」「#header ul li {}」と記載すると思うのですが、 たまに、「body>div{}」といった記述の仕方を見かけます。 これはどういう意味でしょうか？また、これはどういったときに使ったら便利？なのでしょうか？
- ベストアンサー
- HTML
- html divについて
html divについて 現在、html・CSSを勉強中です。 htmlのDivの中で画像を貼っているのですが、左端の中央に設定したいのですが、うまく行きません。 左端中央に画像を表示できる方法を教えてください。よろしくお願い致します。 ↓ html ↓ <div class="area"> <div class="area_left"> <div class="01"> : </div> <div class="02"> : </div> <div> <div class="area_right"> <div class="03"> : </div> <div class="04"> <img src=" "> </div> </div> </div> ↓ CSS ↓ div.area_right .04{ vertical-align: middle; width: 197px; height: 159px; background-image: url("area_04.gif"); }
- ベストアンサー
- HTML
- 期末テスト
もうすぐ中三の期末テストが近いのですが、みなさんが期末テストまでどんな勉強をしたか、一日にどのくらい勉強したか、テスト当日は勉強したか 何かやっといた方がいいものや気をつけないといけないこと等、その他にも 何かアドバイスがあったらお願いします。
- ベストアンサー
- その他（学問・教育）
- xcodeでiphone実機テストができない
iPhoneアプリを作る勉強をしています。 これまでWindowsばかりでMacも初心者ですが、 この度、実機テストをしようとして3日間ハマってしまいまして、 なんとかお知恵をお借りできたらと思いまして、投稿させていただきました。 なんでも結構ですので、アドバイスいただけましたら幸いです。 【現状の問題】 Xcode4.5（OS=mountain lion）でiPhoneアプリを開発しています。 実機をシミュレータとして選べるようにしたいので、 実機テストをするのに、organazer→devices→[add to portal]のボタンを押すと、 No value was provided for the parameter ‘appIdName’ when provisioning というエラーが出て、先に進めません。 iOS dev centerでのプロビジョニングの設定や、xcodeでのBundle identifier等の設定も 一通りいじったつもりです。 検索してもこれといった解決策を見つけることができませんでした。 iOS dev centerのdevice登録など消して、ローカルの証明書も全部消してやり直してみた のですが、やはり同じでした。 よろしくお願いしますm(_ _)m
- ベストアンサー
- その他（プログラミング・開発）
- 大事なテストが、あるらしい
みなさんに、教えていただきたいのは、４年生・５年生・６年生に、とても、大事なテストが、あると聞きました。 ４年生の３月に１回 ５年生の７月に１回・１２月に１回・３月に１回 ６年生の７月に１回・１２月に１回 全部で、６回あってこの成績が、中学１年生の成績に、関わってくるらしいと、最近、聞きました。先輩ママさんに聞いたのですが、みんな、知らないとのことです。 私の子供は、今４年生なのでもうすぐ、そのテストがあるそうなんだけど、学校からは、何も言われてません。 ご存知の方がいたら、アドバイスして下さい。 よろしく、お願いします。！
- ベストアンサー
- 小学校
- 適正テスト
現在派遣会社などで、その方の適正を見分けるソフト導入されてる会社さまが多いですが、あのソフトはなんという名前かご存知の方教えていただけませんでしょうか？ それいがいでも、ソフトもしくは、低価格な適正テストをご存知でしたら、ぜひ教えてください！お願いします！！（人物を見定める適正テストです。）
- ベストアンサー
- その他（ビジネス・キャリア）
お礼
すみません、初心者でしてちょっと難しかったです（；_；）今後勉強しつつ、何度かこのご回答を読み返していきたいと思います（＾＾） ただ「このようにセレクタをつなげて・・・」から始まる最後の文は非常にわかりやすかったです！セレクタについて理解が足りなかったのだなと、皆様から頂いたご回答からわかりました。 どうも丁寧にご説明いただきありがとうございます！