マンガでよめる痔のこと・薬のこと

宜しくお願いします。

CSSで定義した #A というIDがあると仮定します。
その中に、#B があるとします。

<div id="A">
<div id="B"></div>
</div>

このBだけに効かせるCSSの書き方はどのようにしたら良いでしょうか?


#A #B {

}

と言うことではないと思うのですが・・・。

宜しくお願いいたします。

このQ&Aに関連する最新のQ&A

A 回答 (3件)

一応、ID の文脈を指定することはありますよ。

例えば、一時期わずかに流行った手法として、html 要素にページごとの ID を埋め込む、というのがありました。

<html id="C58F5A72-CB88-429D-95BC-8E6FD8341159">
 ....
 <div class="section div1" id="section1-1">
  ....
 </div>
 ....
</html>

/* このページの #section1-1 にだけ適用 */
*:root#C58F5A72-CB88-429D-95BC-8E6FD8341159 *#section1-1 {
 ....
}

本来、ページは ID すなわち URI を持っていますが、CSS でページの URI を調べる標準的な手段がありません(Mozilla/Firefox には @-moz-document などがありますが)。そこでやむをえず上記のような一種のハックを用いました。

まあ、詳細度を上げてしまうため、どちらかと言えば利用者スタイル向けですが。

---
また、アクセシブルな Web アプリのフレームワークである WAI ARIA には、次のような手法があります。

<ul role="tree" aria-activedescendant="treeitem-focused">
 <li role="treeitem" tabindex="0" id="treeitem-focused">りんご</li>
 <li role="treeitem" tabindex="-1" >みかん</li>
 <li role="treeitem" tabindex="-1" >ばなな</li>
</ul>

@aria-activedescendant は、フォーカスの当たっている要素の ID を記録します。しかし、個々のツリー項目にいちいち ID を振るのも面倒です。そこで逆転の発想、「フォーカスの当たっている要素に id="tree-focused" を与える」ことにします。

<ul role="tree" aria-activedescendant="treeitem-focused">
 <li role="treeitem" tabindex="-1">りんご</li>
 <li role="treeitem" tabindex="0" id="treeitem-focused">みかん</li>
 <li role="treeitem" tabindex="-1" >ばなな</li>
</ul>

このように「@id を目印として移動させる」という手法では、@id がツリーの中にないと困ります。

*[role~="tree"] *[role~="treeitem"]#treeitem-focused {
 ....
}

まあ、こちらはスクリプトがないとできませんけどね。
    • good
    • 0

そのようにIDは振りません。


そもそも、IDは一意セレクタと呼ばれる識別子で、文書内に一箇所しか現れないので単純に
#Bで良いです。詳細度はb=1ですから[0,1,0,0]ですね。

 ただ、デザインのためにIDをつけてらっしゃるようですが、基本的に間違いです。必要がない場合はIDはつけません。この場合は必要がありません。

 実際の例で説明すると
<div class="article" id="TOP">
 <div class="header">
  <h1>見出し</h1>
  <p>簡単なサイトの説明</p>
 </div>
 <div class="section">
  <h1>本文見出し</h1>
  <p>段落</p>
  <p>段落</p>
 </div>
 <div class="footer">
  <h1>文書情報</h1>
 </div>
</div>
 で、ヘッダーのh1だけ背景に画像を指定したければ、
div.header h1{background:・・・・・}
 でよいわけです。
 またh1はfon-familyをHGゴシックにしたければ、
h1{font-family:"HGゴシック";}
 文字の大きさをヘッダーフッターと変えたければ
div.header h1{font-size:2.5em;}
div.section h1,
div.footer h1{font-size:1.5em;}
とすればよい。

 示されたHTMLであってもdivが一箇所しかなければ
<div id="A">
<p>あいう</p>
<div>テスト</div>
<p>かきく</p>
</div>
 div.A div{}で、そこを指定できます。

★デザインのためにID(class名)をつけると、HTMLもCSSも膨大で「わけわかめ」になって、何をしているかわからなくなります。

 たとえば私が例に挙げたHTMLだと、
div.footer p{text-indent:0;} /* 詳細度[0,0,1,2] */
と書いた上で、
p{text-indent:1em;} /*詳細度[0,0,0,1] */
とすれば、フッターを除く段落は最初の文字を一文字下げているとCSSを見るだけで解るでしょう。もちろん、HTMLのソースを見ても、どこが本文(section)かわかる。順番が前後しても詳細度が大きいほうが優先される。


 このようにCSS(カスケーディングスタイルシート)は、カスケーディングと言うすばらしい仕組みで、HTMLが文書構造にしたがって正しくマークアップされていれば、特定の場所をIDや変なclass名をつけなくても、特定できるようになっています。
 カスケーディングには、継承、セレクタ、順番、出所、詳細度などが含まれます。

★質問の答えだけだと
 #Bで十分!!! なぜなら一箇所しかないのだから。もちろん正式には *#Bですけどね。

 プロパティの説明のために、#で適用対象を特定しているページがありますが、それはプロパティの説明のためであって、実際にそのようなソースは書いたらダメです。

 
    • good
    • 0

>#A #B {


>(略)
>と言うことではないと思うのですが・・・。

そういうことでOKだったりします。
もし「子要素」であれば
#A > #B
って指定です。

まぁ、IDが同一文書で重複することはNGですから、別の#Bがあるのはちょとおかしいですが・・・
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!


人気Q&Aランキング