- 締切済み
div > p:first-child { color: #ff000
div > p:first-child { color: #ff0000;} div p:first-child { color: #ff0000;} の違いを教えてください
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- himajin100000
- ベストアンサー率54% (1660/3060)
http://www.w3.org/TR/css3-selectors/#descendant-combinators http://www.w3.org/TR/css3-selectors/#child-combinators 直接の子要素か子孫要素であるかの違いです。 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Q5618662 TestCase 1</title> <style type="text/css"> p#a > em{ background-color:red; } p#b em{ background-color:red; } </style> </head> <body> <p id="a">あ<em>い</em>う<strong>え<em>お</em>か</strong>き</p> <p id="b">あ<em>い</em>う<strong>え<em>お</em>か</strong>き</p> </body> </html>
関連するQ&A
- divでくくったけれど、反映が変になります。
divで指定した2つのリンク要素なのですが、 mainのくくりの中の文字にleftsideの設定が反映されてしまいます。 でも、mainで指定した div#main a:hover { color: #6699FF ; text-decoration: underline; }だけはそのまま活きています。 どこが間違っているのでしょうか。 div#main a:link, a:visited { color: #3300FF ; text-decoration: underline; } div#main a:hover { color: #6699FF ; text-decoration: underline; } div#leftside a:link, a:visited { color: #000000 ; text-decoration: none; } div#leftside a:hover { color: #6699FF ; text-decoration: none; }
- ベストアンサー
- HTML
- divが思うように使いこなせず困っています。
divが思うように使いこなせず困っています。 下記のようにした場合、背景色や、width:100; height:100の指定は無視されてしまいます。 (動作確認はfirefox3でしています) width:100; height:100と指定していてもサイズが小さければ小さくなってしまうのでしょうか。 サイズの固定方法と、一番外のdivを効かせる方法をどなたか教えていただけますか？ <div style="min-height:50; width:200; background-color:#FFFF00;"> <div style="width:200; height:100; float:left"> <p>testtest</p> <p>testtest</p> </div> <div style="width:100; height:100; float:left"> <p>testtest</p> <p>testtest</p> </div> </div>
- ベストアンサー
- SEO
- divとpの使いわけ
サイトを作っているとdivとpで迷います。 「自由だしどちらでもいんじゃない？」と言う声も聞こえてきそうに 思うのですがこういう方向で使い分けている等という区分ってありますか？ 私の場合 <div class="title">タイトルです</div> <p>コメントです1</p> <p>コメントです2</p> <p>コメントです3</p> のような感じでcssで p {margin-bottom: 1em;} と設定しております。 コメントに改行がなく1行2行で済む場合は <div>コメントです</div> で問題ないのですができるだけ適した改行(段落)も入れたくpでテキストは 囲むようにしております。 気になったもので質問させて頂きました。有利な点や不利な点など どんなコメントでも構いませんのでご意見をお待ちしております。
- ベストアンサー
- HTML
- :focus,:first-childが効かない
のですがこれはie6だからでしょうか? ちなみにWidowsMe ie6を使っています <style type="text/css"> input:focus { background-color:black; } a:hover { color:white; background-color:black; text-decoration:none; } li { border-top:solid 1px #ccc; } li:first-child { border-top:none; } </style> <input type="text"/><br/> <a href="#">xxxx</a><br/> <ul> <li>ab</li> <li>cd</li> <li>ef</li> <ul>
- ベストアンサー
- HTML
- <P>タグと<div>タグについて
<P>タグと<div>タグには“前後に空行が入るかどうか”という違いがあるそうですが、下記のようなデータを作り、自分のホームページに記入したところ、前後に全く空行が入りませんでした。 しかし、自分のホームページ以外で、このデータを試してみたところ、<p>タグにはきちんと空行が入るようです。 記入する場所によって、空行が入ったり入らなかったりするのは、なぜなのでしょうか？ ※ブラウザはIE8を使用しています。 <P align="right" style="width:740px;margin:auto;">●●●</p> <P align="right" style="width:740px;margin:auto;">●●●</p> <P align="right" style="width:740px;margin:auto;">●●●</p> <div align="right" style="width:740px;margin:auto;">▲▲▲</div> <div align="right" style="width:740px;margin:auto;">▲▲▲</div> <div align="right" style="width:740px;margin:auto;">▲▲▲</div>
- 締切済み
- その他（インターネット・Webサービス）
- divで作成したレイアウトに背景画像を付けたいが付けられない
divでレイアウト作り背景画像を入れたいのですが背景画像が思うように適用されません。 以下のようなサイトのように、作成したレイアウトのコンテンツ部分（真ん中白い背景色部分）に背景画像をつけたいのですが、色々やってみたのですが背景画像が適用されません。 参考サイト：http://www.realbit.net/rb_results/index.html 私のソースコードは以下です。 HTML <body> <div id="header"> <p>ヘッダー</p> <p>あああ</p> </div> <div id="container"> <div id="incontainer"> <div id="main"> <p>メイン</p> <p>あああ</p> <p>あああ</p> <p>あああ</p> </div> <div id="leftMenu"> <p>左メニュー</p> <p>あああ</p> <p>あああ</p> <p>あああ</p> <p>あああ</p> <p>あああ</p> </div> </div> <div id="rightMenu"> <p>右メニュー</p> <p>あああ</p> <p>あああ</p> <p>あああ</p> <p>あああ</p> <p>あああ</p> </div> </div> <div id="footer"> <p>フッター</p> <p>あああ</p> <p>あああ</p> </div> </body> CSS #header { background-color: #FF3; width: 920px; margin-right: auto; margin-left: auto; } #container { background-color: #F00; width: 920px; margin-right: auto; margin-left: auto; } #incontainer { float: left; width: 720px; } #main { float: right; width: 520px; background-color: #900; } #leftMenu { background-color: #00F; float: left; width: 180px; margin-left: 20px; } #rightMenu { float: right; width: 180px; background-color: #FF9; margin-right: 20px; } #footer { background-color: #F0F; clear: both; width: 920px; margin-right: auto; margin-left: auto; } 参考サイトのようにコンテンツ部分に背景画像を入れたい、私の場合container部分にフォトショップで作成した背景画像をいれたいのですが、まずは実験的に、上記のように背景画像を入れる前に赤い背景色を入れて見ましたが赤い背景が出てきません。背景画像もためしに入れてみましたが適用されません。 なにが間違っているのでしょうか？
- ベストアンサー
- HTML
- pとdivのどちらが良いでしょうか？
pタグとspanタグとdivタグの使い分けがよくわからないので http://techmemo.biz/html/p%E8%A6%81%E7%B4%A0%E3%80%81div%E8%A6%81%E7%B4%A0%E3%80%81span %E8%A6%81%E7%B4%A0%E3%81%AE%E3%81%9D%E3%82%8C%E3%81%9E%E3%82%8C%E3%81%AE%E9%81%95%E3%81%84/ を読んだのですが、それでもよくわかりません。 私がやりたい事はindexページにタイトルを表示したいのですが 文字の装飾はしたいです。 でも文字全部に色を付けてサイズを調整したいだけなので spanタグで文字の中の一部の装飾ではないです。 この場合 pとdivのどちらが良いでしょうか？ ページの上部に ～サイトの名前～ みたいにしたいです。
- 締切済み
- HTML
- <P ALIGN>と<DIV ALIGN>の明確な違いってありますか？
ＨＴＭＬの本を読んで勉強しているのですが、<P ALIGN...>も<DIV ALIGN...>も共にテキストの位置を指定するという事が書いてあるだけで違いについては書いてありません。 例えば、<P ALIGN="center">と、<DIV ALIGN="center">では双方に特定の使い方があるものでしょうか？ よろしくお願いします。
- ベストアンサー
- HTML
- floatを適用したdiv内部にあるpタグのmarginについて
floatを適用したdiv内部にあるpタグのmarginについて 現在HTMLとCSSを勉強している者です。 cssのmarginの挙動がいまいち理解できずに困っていたもので、 ご回答いただきたく質問させていただきました。 以下私が作ったサンプルHTMLとCSSです。 ==========HTML========== <div id="test01"> <p>Pタグで囲まれた文章です。</p> </div> <div id="test02"> <p>Pタグで囲まれた文章です。</p> </div> <div id="test03"> <p>Pタグで囲まれた文章です。</p> </div> <div id="clear"> <p>clear: bothです。</p> </div> （<body>前、</body>後省略） ==========CSS========== html, body, div { margin: 0; padding: 0;} p {margin: 10px; padding: 0;} div#test01 {background-color:#EEE; width: 900px;} div#test02 {background-color:#CCC; float: left; width: 650px;} div#test03 {background-color:#AAA; float: left; width: 250px;} div#clear {background-color:#888; clear:both; width: 900px;} 先頭に900pxのdiv（test01）、その下に二つのdiv（test02、03）をfloat:leftで並べました。 最後にclear:bothを行っております。 そして各div内に10pxのmarginを付与したpタグ文字を入力しているのですが、先頭のdivとfloat:leftを行ったdivで、marginの結果が異なってしまいました。 先頭のdivは上下に白い10pxの余白、左はtest01で指定した背景色を残したまま10pxの余白が作られ、float:leftのdivではtest02、03で指定した背景色を残したまま上下左右に10pxの余白が作られています。 このように同じ効果のpタグでも表示が異なってしまう理由は何でしょうか。 また先頭のdivの場合、上下左右に10pxの白または背景色の余白ができるのなら理解できるのですが、何故上下と左右でmargin結果が異なるのか、理由も知りたいです。 おそらくpaddingを併用すれば思った表示にはできると思うのですが、今回はこうなってしまう理由が知りたく質問させていただきました。 また私の記述方法に誤りがあればご指導いただけると助かります。 宜しくお願い申し上げます。
- 締切済み
- HTML
補足
first-childはどうなりますか？