CSS。特定ID内の特定IDにだけ適応できますか？

Question

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

このBだけに効かせるCSSの書き方はどのようにしたら良いでしょうか？ #A #B { } と言うことではないと思うのですが・・・。宜しくお願いいたします。

Chaire · Accepted Answer

一応、ID の文脈を指定することはありますよ。例えば、一時期わずかに流行った手法として、html 要素にページごとの ID を埋め込む、というのがありました。　.... 　

　　.... 　

　.... /* このページの #section1-1 にだけ適用 */ *:root#C58F5A72-CB88-429D-95BC-8E6FD8341159 *#section1-1 { 　.... } 本来、ページは ID すなわち URI を持っていますが、CSS でページの URI を調べる標準的な手段がありません（Mozilla/Firefox には @-moz-document などがありますが）。そこでやむをえず上記のような一種のハックを用いました。まあ、詳細度を上げてしまうため、どちらかと言えば利用者スタイル向けですが。 --- また、アクセシブルな Web アプリのフレームワークである WAI ARIA には、次のような手法があります。

りんご
みかん
ばなな

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

りんご
みかん
ばなな

このように「@id を目印として移動させる」という手法では、@id がツリーの中にないと困ります。 *[role~="tree"] *[role~="treeitem"]#treeitem-focused { 　.... } まあ、こちらはスクリプトがないとできませんけどね。

ORUKA1951 · Answer

そのようにIDは振りません。そもそも、IDは一意セレクタと呼ばれる識別子で、文書内に一箇所しか現れないので単純に #Bで良いです。詳細度はb=1ですから[0,1,0,0]ですね。　ただ、デザインのためにIDをつけてらっしゃるようですが、基本的に間違いです。必要がない場合はIDはつけません。この場合は必要がありません。　実際の例で説明すると

本文見出し

段落

段落

　で、ヘッダーの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.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 · Answer

＞#A #B {
＞(略)
＞と言うことではないと思うのですが・・・。

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

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

CSS。特定ID内の特定IDにだけ適応できますか？

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

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

＞#A #B {

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング