- 締切済み
CSSのユニバーサルセレクタと継承・優先度について
ユニバーサルセレクタの優先度は最下位だと思うのですが 以下の場合でline-heightがユニバーサルセレクタの方を優先してしまうのは何故でしょうか？ <div id="main"> <p></p> </div> *[ line-height: 1.0; ] #main[ line-height: 1.5; ] ユニバーサルセレクタのline-heightがPに設定されるのは理解出来ますが そこからそのPを包み込んだDIVのIDセレクタの設定が継承されないのは何故でしょうか？ 以下のようにIDセレクタから子孫設定をするとようやく優先されます。 *[ line-height: 1.0; ] #main p[ line-height: 1.5; ] ユニバーサルセレクタには自分で設定したIDやクラス そしてそのIDやクラスの子孫設定も含まれるのでしょうか？
- kabushoshinsha
- お礼率0% (0/2)
- ブログ
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- naokita
- ベストアンサー率57% (1008/1745)
何か、勘違いしているのかな・・・ 詳細度や*全称セレクタよりもCSSの基本を学ぶように！ <!DOCTYPE html> <html> <head> <title>TEST</title> <style type="text/css"> *{line-height: 1;} #main p{line-height: 2;} </style> </head> <body> <div id="main"><p>あ<br>い<br>う</p></div> <div id="sub"><p>あ<br>い<br>う</p></div> </body> </html>
関連するQ&A
- cssセレクタ優先度について
https://qiita.com/oh_rusty_nail/items/e896825cd54e5c0a3666 優先度の計算方法はわかっているのですが、以下の場合なぜそうなるかがわかりません。 htmlが <div id="hoge"><div id="poge"><h1>エイチワン（後半略 で h1{ font-size:10px}; #hoge > #poge{ font-size:50px} のcssの場合、id ２つある50pxが強そうに見えますが、なぜ要素のみのh1が勝つのでしょうか？
- ベストアンサー
- CSS
- CSSの継承
ＨＴＭＬに挑戦してから１年が経ちます。 少しずつ勉強してようやく形になってきましたが 継承のことについてよく分からないままきたので質問いたします。 スタイルシートの本には継承されない属性の方が多く書かれています。 例えば代表的なbackground-colorとかがありますが、 私のパソコンでは何故か継承されてしまっているようなのです。 環境はWindowsXP Pro、ブラウザはIE6で試しています。 例えば以下のようなソースです。これをコピペでメモ帳に貼り付けて下さればテストできます。 継承されないのなら<P>タグの背景色は初期値の白のままだと思います。 これって私の継承の理解が間違っているんでしょうか。 それとも他に原因があるのでしょうか。未だに謎なのでよろしくお願いします。 <style type="text/css"> <!-- div {background-color:red} --> </style> <div>aaa <p>継承していません</p> aaa</div>
- ベストアンサー
- HTML
- JqueryでCSSの設定値を変更する
こんにちは。 JqueryもしくはjavascriptでCSSの操作を行いたいのですが、 CSSの設定値そのものを変更させ、保持することは出来るのでしょうか。 例えば、以下のようなCSS設定があり、 p.class-abc{ line-height : 120%; } 描画されている<p class = "class-abc">***</p>に対して、 $('p.class-abc').css({'line-height' : '200%'});とすると、 firebugsで見る限り、 描画されている<p>に対してstyle属性を付与し、line-heightの値を上書きしているように見えます。 私がやりたいのは、 「.class-abc」をあるイベントで「line-height : 200%」に変更して保持し、（これを(1)とします。） その後、あるイベントに連動して、例えば$('p.#zyx').addClass('.class-abc');とした時に、 line-height : 200%である.class-abcを付与したいということなんですが・・・。 この質問を書いていて思ったのですが、 ”クラス”というのは、あくまでセレクタであり、スタイルシートで設定する p.class-abc{ line-height : 120%; } のような記述は、何らかのオブジェクトとしてブラウザに保持されるものでは無いということでしょうか。 雑多な質問になってしまいましたがご教授頂けますと幸いです。 宜しくお願い申し上げます。
- ベストアンサー
- CSS
- CSS idセレクタについて教えてください
いろいろな Web の CSS を参考にして CSS を書いているのですが、id セレクタの並列記載について理解が出来ないので教えてください。 とある Web にあった CSS の記述で、 #contents { margin: 0px; padding: 0px; width: 800px; background: #FFFFFF; } #header { margin: 0px; padding: 0px; background: #FFFFFF url(title.gif) no-repeat center top; height: 60px; width:800px; text-align: center; display: block; position: relative; } は理解できるのですが、左側にメニューを配置する設定に関して #contents #sidemenu { margin: 5px; padding: 0px; float: left; width: 160px; text-align: left; background-color: #FFFFFF; } となっていて、#sidemenu ではなく、#contents #sidemenu となっていました。 <div id="contents"> あいうえお <div id="header"> かきくけこ </div> <div id="sidemenu"> メニュー </div> さらにコンテンツ </div> とすれば、contents の要素は header にも sidemenu にも継承されると思っていたのですが違っているのでしょうか。 contents と sidemenu の両要素を反映させるために #contents #sidemenu となっているのでしょうか。 初歩的な質問だと思いますが、どうぞよろしくお願いします。
- ベストアンサー
- CSS
- CSSの使い方の流儀？
先日業者にホームページの作成を依頼したところ、 子孫セレクタを駆使したCSSを使ったページが できあがってきたのですが・・・ たとえばこんな感じ <div id="header"> <div class="block1"> <span>・・・・・・</span> ・・・・・・・ </div> <span>・・・・・・</span> ・・・・・・・ </div> <div id="contents"> <div class="block2"> <span>・・・・・・</span> ・・・・・・・ </div> <span>・・・・・・</span> ・・・・・・・ </div> これに対して CSSでこんなスタイルが設定されています（セレクタ部のみ抜粋） #header .block1 #header .block1 span #header span #contents .block2 #contents .block2 span #contents span 私だったらわざわざ複雑な子孫セレクタを使わずに、 個々にクラスかIDを設定すると思うのですが・・・ また、ただ画像が貼ってあるだけと思ったら、 CSSでspanの背景画像として貼ってあったり、 ただの仕切り線と思ったら、 やはりdivのボーダーラインを使っていたり・・・ こういう作りって一般的なのでしょうか？ あるいは、何か利点があるのでしょうか？ ブログのカスタマイズなどだと、元のHTMLを自分で直せない場合が多いので、 こういうコトをすることが良くある、というのはわかるのですが・・・ あまりにHTMLのタグの構造とCSSが密接に絡んでいて、 ほんの一文追加しようとしただけで苦労していまして・・・ なんでこういう書き方なのかな・・・と、 不思議に思っています。。
- 締切済み
- HTML
- cssのfloatについて
cssのfloatを使い横並びを実現していますがoverflowを利用して横並びを実現するという方法を聞きました。 現状の構成は具体的に以下のような感じです。 <div id="main"> <div id="left">レフト</div> <div id="center">センター</div> </div> #main:after { content: "."; display: block; visibility: hidden; height: 0.1px; font-size: 0.1em; line-height: 0; clear: both; } #left {float: left;} #center { float: right} これをoverflowで実現するにはどうすればいいのでしょうか？ また、floatを使用しないで実現するメリットはなんでしょうか？
- ベストアンサー
- HTML
- cssについて、困っております。
DWでHTMLとCSSの練習としてHPを作成しているのですが、 CSSのスタイルが適用されず、思うようなデザインに出来ず困っております。 例でいうと <div id="main"> <p>～～～～～～～</p> <p>～～～～～～<br /></p> </div> ⬆に対し #main { margin-left:340px; font-size:18px; text-align:center; height:auto; width:600px; { などを指定しているのですが、font-size,text-alignだけが適用され、 その他のmargin,height,width,などが 「(プロパティ名)～は継承されていないため選択範囲に適用されません。外側のタグに適用されます。」 と表示され、適用されません。 この場合はどこに問題があって適用されないのでしょうか？？ また、「外側のタグに適用されます。」というのはどの外側の部分に適用されるのでしょうか？？ 初歩的な質問で申し訳ございません。 回答お願い致します。
- 締切済み
- CSS
- ＣＳＳ－heightの自動調節について
ＣＳＳを使いホームページ作成をしております。 一番上にロゴやフラッシュ、メニューを置き、その下の #mainという<div>の中に、#sideと#textの２つの<div>を横に並ばせ入れ込んでいるのですが、 #main全体の高さを、背景入りで、文字に合わせて自動調節したいと思っています。 しかし#mainのＣＳＳにheight:auto;を書き込んでも表示されません。 普通はheightは指定しなくても自動で調節されるものだと思っていたのですが、できなかったのでautoと書いたのですがダメでした。 heightをピクセルで指定すると表示されますが、文字を飛び越えて表示されてしまいます。 解る方どうかご回答お願い致します。 ＣＳＳについては初心者のため記述がおかしい部分もあるかもしれませんが、ＨＴＭＬとＣＳＳは以下の通りです。 【ＨＴＭＬ】 <div id="main"> <div id="side"> <p>左サイド</p> </div><!--side end--> <div id="text"> <p>右サイド</p> </div><!--text end--> </div><!--main end--> 【ＣＳＳ】 #main { width:800px; height:auto; background: #ffffff; margin-right: auto; margin-left: auto; margin-bottom:auto; clear: both; } #side { float:left; width:170px; margin-top:20px; } #text { float:right; width:600px; margin-top:20px; }
- 締切済み
- その他([技術者向] コンピューター)
- ＣＳＳで左右の固定について
まず、以下ＣＳＳ body { text-align:center; } <! メインのフレーム指定> #page { width:760px; margin:0 auto; text-align:left; } <! ヘッダー及び横項目指定> #header { width:100%; text-align:center; height:65px; } #header2 { width:750px; line-height:35px; background-color:#FF00FF; } <! 中央左右設定及び余白指定> .pageyohaku { margin:0 10px; } .main {width:570px; float:right; background-color:#E0FFFF;} .submenu { width:170px; float:left; background-color:#FFC0CB;} .c-both { clear:both; } <! 下記記載事項枠指定> .footer1 {width:100%; text-align:left;line-height:15px;background-color:#24CF00;clear:both;} .footer2 {width:100%; text-align:center;line-height:15px;background-color:#DCDCDC;clear:both;} <! リンク指定> .link {color:blue;} －－－－－－－－－－－－－－－－－－－－－－－－－－－ 次にｈｔｍｌ <html> <head> <link href="style.css" rel="stylesheet" type="text/css"> <title>ホームページ</title> </head> <body> <div id=page> <div id=header> <p><img border="0" src="img/logo.gif" width="730" height="65"></p> </div> <div id=header2> <p>このページはします</p> </div> <div class=pageyohaku> </div><! pageyohakuの終わり指定> <div class=main> <p>本日はようこそ</p> <p>本日はようこそ</p> <p>本日はようこそ</p> <p>本日はようこそ</p> <p>本日はようこそ</p> <p>本日はようこそ</p> <p>本日はようこそ</p> </div><! mainの終わり指定> <! サブメニュー一覧> <div class=submenu> <p>リンク</p> <p>リンク</p> <p>リンク</p> <p>リンク</p> <p>リンク</p> <p>リンク</p> </div><! submenuの終わり指定> <div class=c-both> </div><! c-bothの終わり指定> <div class=footer1> 最下層メニュー項目</p> </div><! footer1の終わり指定> <div class=footer2> <p>コピーライト</p> </div><! footer2の終わり指定> </div><! Pageの終わり指定> </body> </html> 以上のように外部指定で作成したのですが７６０Pxよりブラウザの 幅を狭くするとレイアウトが崩れてしまいます。 何が悪いのでしょう、誰か教えてください。 大きすぎると左のリンクが外へはみ出る感じになりますが とにかく幅は固定し、左右に分かれる「main」「submenu」を Pageの枠にはめてブラウザのウィンドウを小さくしても 変化しない(崩れない)レイアウトを望みます。 調べてもほとんど同じ書き方で崩れないところもあるので どこが悪いのかわかりません。 わかりやすいようにメモも付けて整理してみたのですが どなたかお願いします。
- 締切済み
- CSS
