みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

CSSのクラス指定について

CSSのクラス指定で質問させていただきます。


下記の条件で「a-クラスのついたDIV」の中で、
なおかつ一番初めに表示される[a-]の背景色だけ「赤色」にする方法を教えてください。
「a-1」「a-2」「a-3」はそれぞれ時間によって消えたりし、[x]が挿入されたりします。

以上のように条件が変わっても、常にclass=「a-」のついた一番上のDIVの背景は赤色になります。


HTML-------------------
<div class="wrapper">

<div class="x"></div>

<div class="a-1"></div>
<div class="a-2"></div>
<div class="a-3"></div>

</div>


css-----------------------

[class^="a-"]{};


nth-of-typeを使って指定できると思うのですが、いまいちうまくできません><
ぞうぞよろしくお願いします。

投稿日時 - 2013-02-04 15:41:11

QNo.7927630

すぐに回答ほしいです

質問者が選んだベストアンサー

nth-of-type を使わなくても実現可能ですね。
http://jsfiddle.net/pSHQA/

[class^=a-]:first-child { color: red; }

ただし、可視/不可視に関しては現在のCSSセレクタでは判別不能です。
特定の class 名を含む時のみ不可視状態にする等してセレクタを組んでみてください。

投稿日時 - 2013-02-04 18:54:48

お礼

[class^=a-]:first-child { color: red; }で指定できました!

ほんとにほんとにありがとうございます!

投稿日時 - 2013-02-04 20:12:14

ANo.2

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(4)

ANo.4

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 )とその用途を参考にしています。

投稿日時 - 2013-02-04 19:25:38

ANo.3

#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 名をうまく書き換えるようにしてみてはどうでしょう。

投稿日時 - 2013-02-04 19:07:42

補足

ありがとうございます。 命名規則は仮です

丁寧にご指摘頂きありがとうございます><

投稿日時 - 2013-02-04 19:32:55

ANo.1

.wrapper > div[class~="a"]:nth-of-type(2){
background-color: red;
}
上のcssでclass="a-1"に対応するdivが赤くなるのでnth-of-type(2)を処理(カウント)してから属性セレクタ[class~="a"]を判断しているように見えます。
もしかしたらシンプルな書き方は無いかもしれませんね

投稿日時 - 2013-02-04 17:52:39

補足

解答ありがとうございます。


恐れ入りますが、
教えていただいた方法を実験してみましたが、背景色が変更されませんでした><

自分も教えて頂いたソースで変わるものと思っているですが・・・
アドバイスお願いいたいます。

投稿日時 - 2013-02-04 19:52:25

あなたにオススメの質問