- ベストアンサー
CSSのクラス指定でa-クラスのついたDIVの中で一番初めに表示される要素の背景色を赤色にする方法
- CSSのクラス指定で、class=「a-」がついたDIVの中で一番初めに表示される要素の背景色を赤色にする方法について教えてください。
- 要素は、「a-1」「a-2」「a-3」のいずれかで、時間によって消えたり[x]が挿入されたりします。
- 条件が変わっても、常にclass=「a-」のついた一番上のDIVの背景色が赤色になるようにしたいです。
- nekogeruge
- お礼率33% (16/48)
- CSS
- 回答数4
- ありがとう数1
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
nth-of-type を使わなくても実現可能ですね。 http://jsfiddle.net/pSHQA/ [class^=a-]:first-child { color: red; } ただし、可視/不可視に関しては現在のCSSセレクタでは判別不能です。 特定の class 名を含む時のみ不可視状態にする等してセレクタを組んでみてください。
その他の回答 (3)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
class名はあくまで文書構造を補完するためで、へんなものつけたら後で分からなくなります。 例えば、本文ブロックだとします。 <body> ・・・【中略】・・・ <div class="section"> <div class="section"> </div> <div class="article"><!-- header,footerを持つと仮定してよい完結した記事 --> </div> <div class="article"><!-- header,footerを持つと仮定してよい完結した記事 --> </div> <div> このとき、div.sectionの最初の子孫であることに着目すると div.section div.article{background-color:red;} div.section div.article+div.article{background-color:transparent;} と、子孫セレクタと隣接セレクタを使う または、 div.section div.article:first-child{background-color:red;} と:first-child(擬似クラス)を使う。 よくある手法ですが、 <div class="section"> <h2>見出し</h2> <p>段落</p> <p>段落</p> <p>段落</p> </div> div.section p:first-child{font-weight:bold;} とか・・・ class名をむやみやたらに使うことを避け HTML4.01「DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するため( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )」 HTML5「class, lang, title 属性を使って、連続した要素のグループに共通のセマンティクスをマークアップすることができます。( http://www.html5.jp/tag/elements/div.html )」 に徹して、その文書構造を元にスタイルを指定すると、とても簡単になります。 div.section div.article{background-color:red;} /* 本文(section)の子孫である記事(article)の背景は赤 */ div.section div.article+div.article{background-color:transparent;} /* 本文中の記事に続く記事の背景は透明 */ div.section div.article:first-child{background-color:red;} /* 本文に出てくる最初の子孫の記事は背景赤 */ div.section p:first-child{font-weight:bold;} /* 本文の最初の段落だけは太字 */ とHTML見なくても、スタイルシートが読み取れるでしょ!! これらのclass名はHTML5の新しい要素( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )とその用途を参考にしています。
- think49
- ベストアンサー率59% (285/482)
#2 です。 読み返して思い直しましたが、これは class 命名規則を見直すのがスマートな気がします。 a-1, a-2, a-3 は class 名として正しいものでしょうか。(ユニークな名称に思えるので id がふさわしいように感じるのですが…) 私なら以下のように書き換えます。 <div id="hoge1" class="a">hoge1</div> <div id="hoge2" class="a">hoge2</div> <div id="hoge3" class="a">hoge3</div> [class^=a-] は <div class="x a-1"> に書き換わった時に機能しなくなる欠点を持っています。 確実に機能するように命名規則を変更するのがスマートかと思います。 でなければ、.a-1 を消したり現れたりする機構の方で class 名をうまく書き換えるようにしてみてはどうでしょう。
補足
ありがとうございます。 命名規則は仮です 丁寧にご指摘頂きありがとうございます＞＜
- axuaxua
- ベストアンサー率36% (82/223)
.wrapper > div[class~="a"]:nth-of-type(2){ background-color: red; } 上のcssでclass="a-1"に対応するdivが赤くなるのでnth-of-type(2)を処理(カウント)してから属性セレクタ[class~="a"]を判断しているように見えます。 もしかしたらシンプルな書き方は無いかもしれませんね
補足
解答ありがとうございます。 恐れ入りますが、 教えていただいた方法を実験してみましたが、背景色が変更されませんでした＞＜ 自分も教えて頂いたソースで変わるものと思っているですが・・・ アドバイスお願いいたいます。
お礼
[class^=a-]:first-child { color: red; }で指定できました！ ほんとにほんとにありがとうございます！