- ベストアンサー
CSS。特定ID内の特定IDにだけ適応できますか？
宜しくお願いします。 CSSで定義した #A というIDがあると仮定します。 その中に、#B があるとします。 <div id="A"> <div id="B"></div> </div> このBだけに効かせるCSSの書き方はどのようにしたら良いでしょうか？ #A #B { } と言うことではないと思うのですが・・・。 宜しくお願いいたします。
- みんなの回答 （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 { .... } まあ、こちらはスクリプトがないとできませんけどね。
その他の回答 (2)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
そのように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ですけどね。 プロパティの説明のために、#で適用対象を特定しているページがありますが、それはプロパティの説明のためであって、実際にそのようなソースは書いたらダメです。
- neko-ten
- ベストアンサー率55% (1287/2335)
＞#A #B { ＞(略) ＞と言うことではないと思うのですが・・・。 そういうことでOKだったりします。 もし「子要素」であれば #A > #B って指定です。 まぁ、IDが同一文書で重複することはNGですから、別の#Bがあるのはちょとおかしいですが・・・
