- ベストアンサー
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が勝つのでしょうか？
- muuming2001
- お礼率68% (711/1039)
- CSS
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
前者は要素そのものを指定しているのに対し、後者は親要素に指定しているという違いがありますね。つまり、後者は継承を期待していることになります。 継承を期待するには、h1のfont-sizeがinheritである必要がありますが、それがh1の指定によって、10pxに指定されているため継承は成立しません。つまり、優先順位の問題ではないとうことです。 ちなみに、h1#hogeという要素があった場合は、タグ名で指定するよりID名で指定したほうが優先順位が高いです。これがいわゆる優先順位の話です。
関連するQ&A
- CSSで文字指定：あるセレクタで指定した値を他のセレクタへ継承させることは出来ますか？
文字サイズをCSSで指定する方法についての質問です。 同一の文字サイズ指定でも、OS・ブラウザ間で表示にギャップがあります。 そのギャップを調整するために、JavaScriptを使用して OS・ブラウザごとにそれぞれ異なった外部CSSファイルを読み込むようにしています。 macintosh.css windows.css windowsIE.css ...このような振り分けCSSファイルでそれぞれ文字サイズ指定をしています。 CSSファイルの中身は、 macintosh.css .small { font-size: 10px; } /* 小さめ */ .middle { font-size: 12px; } /* 中くらい */ .large { font-size: 14px; } /* 大きめ */ windowsIE.css .small { font-size: 0.8em; } /* 小さめ */ .middle { font-size: 0.9em; } /* 中くらい */ .large { font-size: 1em; } /* 大きめ */ ...といった具合です。 このやり方では、h2の文字サイズを全て中くらいの大きさに指定したい場合、 全てのh2タグに <h2 class="middle"> と記述することになってしまいます。 これは煩雑なので一括指定したいと考えます。 すぐ思いつく方法は、振り分けCSSファイルにh2の文字指定も含めることです。 macintosh.css h2 { font-size: 12px; } windowsIE.css h2 { font-size: 0.9em; } ...のようなことです。 そうではなく、h2に .middle（＝中くらい）で指定した文字サイズをそのまま受け継がせる方法はないでしょうか？ h2 { class="middle" } 変な書き方ですが、意図を汲み取っていただけるでしょうか。 このように指定出来れば、かなり省力化出来るように思います。方法があればぜひお教え下さい。
- ベストアンサー
- HTML
- ワードプレスのテーマParabolaの文字サイズ
記事タイトルのフォントサイズの変更方法をご存知の方はいませんか？ CSSで #content .entry-title { font-size: 36px;→font-size: 16px; font-weight: normal; line-height: 1.3em; padding:0px; margin: 0px; word-wrap:break-word; } とか #content .entry-content h1 { font-size: 36px;→font-size: 16px; } などと変更してもダメでした。 HTML的には <div id="main"> <div id="forbottom" > <div style="clear:both;"> </div> <section id="container" class="two-columns-right"> <div id="content" role="main"> <h1 class="entry-title">タイトル（ここの文字サイズを変更したい）</h1> という感じです。
- ベストアンサー
- CSS
- cssの入れ子について
サイト中の記事部分だけ文字を大きくするにはどうしたら良いでしょうか。 <div class="content"> <div class="entry"> テストです テストです テストです テストです てすとです </div> </div> .content{ font-size: 13px; } .entry{ font-size: 15px; } これで試した見たらentry部分が13pxになりました。15pxにしたいのですが、どうしたらよろしいでしょうか。 どうぞよろしくお願い致します。
- ベストアンサー
- ブログ
- ＣＳＳの背景がネスケだと表示されません（＞＜
ＩＥだとちゃんと見れます。 ＣＳＳのタグが #top-bg { background-image: url("archives/img/top.gif"); height: 55px; width: 700px; } #banner { font-family: Verdana, Arial, sans-serif; color: #e40c5d; text-align: left; padding-bottom: 0px; padding-top: 8px; padding-left: 350px; padding-right: 0px; } で、こういう風に表示しています↓↓ <div id="top-bg"> <div id="banner"> <h1>ページタイトル</h1> </div> </div> どなたかよろしくお願いします…
- ベストアンサー
- HTML
- CSSレイアウトについて
はじめまして。 個人用サイトを趣味で制作しています。 下記のようなイメージを、html×cssで組みたいのですが、 うまくいきません。 なんとかsafariで、再現したいのですが、問題点がわかりません。 ※IE6は、きっと無理ですよね。 どなたか原因分かる方教えていただけると幸いです。 ■イメージ http://www.turn.jp/design.jpg ■現状サイト http://www.turn.jp/ ■htmlソース <body> <div id="container"> <div id="wrapper"> <div id="contents"> <div id="logo"> <h1><img src="images/logo.png" width="200" height="164" alt="2lemma" /></h1> <h2><img src="images/menu.png" width="447" height="79" alt="blog" /></h2> </div> <div id="footer"> <p>Copyright©2010 All Rights Reserved.</p> </div> </div> </div> </div> </body> </html> ■CSS @charset "Shift_JIS"; /* CSS Document */ }#container { margin: auto; width: 1000px; background-color: #959500; } #wrapper { height: 437px; width: 960px; background-image: url(../images/design.jpg); background-repeat: no-repeat; margin: 20px; } #logo { text-align: right; height: 164px; width: 200px; margin-right: 245px; margin-top: 170px; float: right; } #footer { clear: both; color:#FFFFFF; font-size:8px; padding-top: 10px; }
- 締切済み
- その他([技術者向] コンピューター)
- CSSについて
こんにちは。 現在、ホームページの制作をしています。 早速ですが、 floatを使用し、左右に「お知らせ」と「PR」の見出しをつけようと思ったのですが・・・。 http://www5.atpages.jp/ri19960914/souzou.png ↑のように、ひとつ段落ができてしまいます。 このようにしたいのです。↓ http://www5.atpages.jp/ri19960914/souzou2.png CSSはこちらです。↓ #mainbody .titleall { float:left; color:#fff; font-size:12px; font-weight:bold; background-color:#636; height:10px; margin:0 auto; width:800px; padding:8px; } #mainbody .titleleft { float:left; color:#fff; font-size:12px; font-weight:bold; background-color:#636; height:10px; margin:0 auto; width:370px; padding:8px; } #mainbody .titleright { float:right; color:#fff; font-size:12px; font-weight:bold; background-color:#636; height:10px; margin:0 auto; width:370px; padding:8px; } #mainbody ul.all { width:800px; white-space:normal; } #mainbody ul.left { float:left; width:350px; } #mainbody ul.right { float:right; width:350px; } まだCSS初心者なので、不適切なCSSもあるかもしれません。 htmlソース↓ （途中略） <div id="mainbody"> <div class="titleleft">お知らせ</div> <ul class="left"> テスト（ここにお知らせの文字） </ul> <div class="titleright">PR</div> <ul class="left"> ここに広告のhtmlタグ </ul> どなたか、 http://www5.atpages.jp/ri19960914/souzou2.png のようになる方法を教えていただければ、幸いです。 お願いします。 追記：画像URLを開くと、Forbiddenエラーが出るので、 ご面倒だとは思いますが、URLボックスに直接アドレスを 入力してくださるよう、お願いします。 追記2：分からない点があったら、お願いします。
- ベストアンサー
- CSS
- CSS：印刷時のレイアウト崩れについて
CSSを利用してレイアウトしたページを作成しています。 もう殆ど作りこんだ今になって気付いたのですが、記事本文のテキストが長くなり、印刷プレビュー時に改ページされる程度にまで伸びると、一挙にレイアウトが崩れてしまうようなのです。 こちらにつきまして回避策はありますでしょうか？ ★外部CSS部分 body { padding: 0px; margin: 0px; } #container { width: 762px; position: relative; margin: 0 auto; margin-left: auto; margin-right: auto; top: 0px; } #header { width: 549px; position: absolute; left: 212px; top: 3px; } #left { width: 211px; position: absolute; left: 1px; top: 0px; } #content_right { width: 510px; margin-left: 231px; padding-top: 149px; font-size: 0.8em; line-height: 140%; } #footlink { text-align: center; margin: 30px 0px 40px 0px; } ★HTML部分 <div id="container"> <div id="content_right"> <h1>h1テキスト</h1> <h2>h2テキスト</h2> <p>記事：この辺に印刷プレビューで改ページされるほど改行を入れた場合です</p> <div id="footlink"><a href="#">フッダリンク</a></div> </div> <div id="header">ヘッダメニューとかタイトル画像とか</div> <div id="left">左メニュー部分</div> <div>コピーライト</div> </div> どうにもならないようであれば、印刷時に記事部分だけ抜き出すようなカタチにするべきなのかと考えていますが、難しそうで少し尻込みしています。 良い手立てがあるようでしたら、是非教えてください。 よろしくお願いします。
- 締切済み
- HTML
- html/CSSでBOX内にBOXを作り、その両方に異なる<h2>タグ
html/CSSでBOX内にBOXを作り、その両方に異なる<h2>タグを設定したい。 具体的には、 -------------------------------------------- #box1{・・・・・・} #box1 h2{ font-size:14px; border: solid red 1px; width: 800px; } #box2{・・・・・・} #box2 h2{ font-size:10px; border: solid blue 1px; width: 400px; } -------------------------------------------- というCSSがあり、html上ではbox1の中にbox2が入っています。 -------------------------------------------- <div class="box1"> <h2>あああああ</h2> <div class="box2"> <h2>いいいいい</h2> </div> </div> -------------------------------------------- このとき、CSSの「box1のh2タグの設定」がbox2内のh2タグにおいても反映されてしまいます。 box2内では「box2のh2タグの設定」を反映させたいのですが、どうすればできるのか 教えていただけますでしょうか。 よろしくお願いします。
- ベストアンサー
- HTML
- ブラウザごとにCSS?
こんにちは。 HTMLとCSSを使ったホームページを作っています。 確認用のブラウザにSleipnirを使っています。 下のように記述し、ブラウザエンジンを切り替えて見たところ、それぞれ幅が違うことに気づきました。 幅が異なると、デザインもグチャグチャになってくるので、大変困っています。 これを回避、対処する方法を教えて欲しいです。 補足もなるべく早くさせてもらいます。 どうかよろしくお願いします。 <style type="text/css"> div{ border:solid #cccccc 1px; width:750px; margin:5px; } #all{ width:800px; height:auto; text-align:center; } #header{ height:200px; } #main{ height:auto !important; height:15em; min-height:15em; } #footer{ font-size:10px; height:2em; } </style> <div id="all"> <div id="header"> </div> <div id="main"> </div> <div id="footer"> </div> </div>
- ベストアンサー
- HTML
お礼
なるほど、理解しました。 ありがとうございます。 そして手元で悩んでいた問題には user agent stylesheet も絡んでいました。謎がクリアになりスッキリです！