- ベストアンサー
CSSの子孫セレクタの使い方について
CSSでsatelliteクラスの中に含まれるP要素のフォントサイズを一段階小さくしたいのですが、 div#satellite p{ font-size: small; } と書いても反映されません。 どのように書けばよろしいのでしょうか。 回答お願いします。
- CSS
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
関連するQ&A
- css3のセレクタについて
質問させてください。 CSS3で疑問に思っていることがあります。 たとえば、 例1） <div id="sample"> <p>サンプル1</p> <p>サンプル2</p> <p>サンプル3</p> </div> に対して、cssで #sample p:nth-cihld(3){ color:red;} とすればサンプル3だけ赤文字になると思います。 また 例2） <div id="sample"> <dl> <dt>サンプル1</dt><dd>sample1</dd> </dl> <dl> <dt>サンプル2</dt><dd>sample2</dd> </dl> <dl> <dt>サンプル3</dt><dd>sample3</dd> </dl> </div> に対して、 #sample dl:nth-cihld(3){ color:red;} とするとサンプル3 sample3が赤文字になります。 (検証ブラウザはクローム/FF/IE9・10) IE7・8はCSS3に対応していないので、赤文字になりません。 IE7・8にも対応するようにselectivizr.jsを使用します。 すると 例1はIE7・８で赤文字になりますが、例２は変化なしでした。 これはselectivizr.jsの仕様なのでしょうか。 それとも、厳密に言うとdl要素はdiv要素の子要素には当たらないのでしょうか。 腑に落ちなくてかなり時間を使ってしまいました。 ご教授いただけませんでしょうか。 よろしくお願い致します。
- 締切済み
- HTML
- 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
- xhtmlについて
xhtmlでは、『<div style="text-align:center;font-size:x-small;">文字</div>』といったように、ブロック要素内にインライン要素をまとめることも可能だったと思います。 この場合、文字サイズ指定もブロック要素内にあるわけですから、『<div style="text-align:center;font-size:x-small;"><p>文字</p></div>』といった具合に、ブロック要素を内包することも可能なのでしょうか？ 回答お願い致します。
- ベストアンサー
- その他（インターネット・Webサービス）
- 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の正しい記述の仕方
CSSの記述の仕方なんですが、下記のような書き方は正しいのでしょうか？ .f14 {font-size: 14px;} .bold {font-weight: bold;} .red {color: #FF0000;} <p class="f14 bold red">あいうえお<div> HTMLには構成要素、CSSにはデザイン要素のみを記述と考えると正しくない気がしますが、 何度も使うような場合は、この方がCSSが短くなるので使っています。 どうなんでしょうか？ 気にしすぎでしょうか。
- ベストアンサー
- HTML
- cssで定義したクラス情報をcssセレクタ内で使用
cssで文字装飾用の以下のクラスを作成しました。 .label { font-size:95%; color:blue; } これを <div id="view"> <span>ラベル1</span><span>ラベル2</span>～(以降大量に続く) </div> というhtmlに適用したいのですが、spanタグ全てに.labelを指定するのは見辛さからいっても 避けたいと思います。 出来れば #view span { .label } というようにcssで対象を選択して既存のクラス定義を適用したいのですが、こういう感じで 一気に適用する記述方法はありませんでしょうか。
- ベストアンサー
- HTML
- FC2ホームページで大見出しのフォントを変更したい
<div id="">で名付けてｃｓｓで指定し、孫要素<h1></h1>の文字サイズと書体を変えたいのですが、何か間違えているらしく反映されません。お助け下さい。 ---ｃｓｓ--- #id名 h1{ font-size: smaller; font-family:'メイリオ',"ヒラギノ丸ゴ Pro",sans-serif; } ---html--- <div id="id名"> <div> <h1>テスト</h1> <p>ほにゃらら</p> </div> </div> フォントサイズに関しては、正直FC2ファイルエディタで操作し、htmlの方に<span>で指定してもらえば解決するのですが、htmlとcssの勉強もかねているので、cssファイルで指定する方法についてご教授頂きたく存じます。
- ベストアンサー
- ホームページ作成ソフト
- CSSについて
CSSについて質問させてください。 CSSをタグの中に直接書き込む場合 <div style="color:#ffa500; font-size:20pt; font-weight:bold; text-decoration:underline;"> このような場合のstyle="部分は、styleタグと呼んで いいのでしょうか？ divタグの中に記述しているので、styleプロパティと 呼ぶのでしょうか？ CSSのリファレンスにはstyleプロパティはありません。 ということは、やっぱりdivタグのstyleプロパティで CSSを指定していると考えるのでしょうか？
- 締切済み
- HTML
- jQuery 子孫セレクタがうまくいかない
最近jQueryを勉強しはじめた者です。勉強していく中で、 疑問が生じたので、質問させていただきます。 jQueryの子孫セレクタが意図したとおりに動きません。 具体的には ： $(function(){ $("p strong").remove(); }); ： <p><em><strong>削除される</strong>abcdefg</em></p> <p><div><strong>削除されるはず</strong>abcdefg</div></p> ： と記述した時、 <strong>削除されるはず</strong> の部分が削除されません。 <strong>削除される</strong> の部分は削除されます。 以下のときは、2つとも削除されます。 ： $(function(){ $("li strong").remove(); }); ： <ol> <li><em><strong>削除される</strong>abcdefg</em></li> <li><div><strong>削除されるはず</strong>abcdefg</div></li> </ol> ： 私は、どの場合であっても削除されると考えていました。 ブロックレベル要素とインライン要素が関係していそうな感じはするのですが、 なぜ、このようになるか理由がわかりません。 よろしくお願い申し上げます。
- 締切済み
- JavaScript
- 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
