23


6

同じクラスの2番目のdivを見つけるためのCSS3セレクタ

私は同じクラスを持つ2の2 divを見つけることができるCSSセレクタが必要です。 私は `nth-child()`を見ましたが、私が欲しいクラスをさらに明確にする方法が見当たらないのでそれは私が欲しいものではありません。 それが助けになるならば、これらの2 divは文書の中で兄弟になるでしょう。

私のHTMLはこんな感じです:

...
...
...
...

そして、私は2番目のdiv.barが欲しい(または最後のdiv.barもうまくいくだろう)。

8 Answer


36


セレクタは組み合わせることができます。

.bar:nth-child(2)

2番目の子でもある「クラス_bar_を持つもの」を意味します。


21


更新:この答えはもともと2008年に `n-of-type`サポートが信頼できないときに書かれたものです。 今日、私はあなたが安全に `.bar:nth-​​of-type(2)`のようなものを使うことができると言うでしょう。

'' '' '

_ 2008年からの最初の回答は以下の通りです(私はもうこれをお勧めしません!)_:

あなたがhttp://www.prototypejs.org/[Prototype JS]を使うことができるなら、あなたはいくつかのスタイル値を設定するためにこのコードを使用するか、または別のクラス名を追加することができます:

// set style:
$$('div.theclassname')[1].setStyle({ backgroundColor: '#900', fontSize: '1.2em' });
// OR add class name:
$$('div.theclassname')[1].addClassName('secondclass'); // pun intentded...

(私はこのコードをテストしませんでした、そしてそれは実際に2番目のdivが存在するかどうかをチェックしません、しかしこのような何かはうまくいくはずです。)

しかし、HTMLサーバサイドを生成しているのであれば、2番目の項目にクラスを追加することもできます。


18


私の最初の答え: `:nth-​​of-type`は間違っています。 これを指摘してくれたPaulに感謝します。

そこでの "type"という単語は "element type"( div`のような)だけを指します。 セレクタ `div.bar:nth-of-type(2)`と `div:nth-​​of-type(2).bar`は同じことを意味しています。 どちらも、 [a] are the second `div of their parent, and [b] have class bar.

最初のものを除いて特定のセレクタのすべての要素を選択したいのであれば、私が知っている唯一の純粋なCSSソリューションが残っています:一般的な兄弟セレクタです:

.bar ~ .bar

'' '' '

私のオリジナルの(間違った)答えは以下の通りです:

CSS3の到来とともに、他の選択肢があります。 最初に質問があったときには利用できなかったかもしれません。

.bar:nth-of-type(2)

これは `.bar`セレクタを満たす2番目の要素を選択します。

特定の種類の要素の* 2番目と最後の*(または最初の要素を除くすべて)が必要な場合は、一般的な兄弟セレクタも問題なく機能します。

.bar ~ .bar

もっと短いです。 しかし、もちろん、コードを複製するのは好きではありませんよね。 :-)


11


HTMLの構造は正確には何ですか?

HTMLがそのようなものであれば、以前のCSSは機能します。

  • CSS *

.foo:nth-child(2)
  • HTML *

私を見つけて
...

しかし、次のようなHTMLがあると動作しません。

私を見つけて  ...

簡単に言えば、それ以前のセレクタの残りからマッチのインデックスを取得するためのセレクタはありません。


6


そしてjQuery互換の答えを探している人のために:

$( '。foo:eq(1)')。css( 'color'、 'red');

HTML:

私を見つけて   ...


4


  • HTML *

ターゲットバー要素

フー要素バー要素バズ要素バー第二要素ジャー要素カル要素バー第三要素
  • CSS *

.bar {background:red;}
.bar~.bar {background:green;}
.bar~.bar~.bar {background:yellow;}
https://jsfiddle.net/ssuryar/6ka13xve/[デモ] https://jsfiddle.net/ssuryar/6ka13xve/


1


Javascriptでこれができない理由はありますか? 私のアドバイスは、普遍的なルール( .foo)でセレクターをターゲットにしてからJavascriptで最後のfooを取得し、あなたが必要とする追加のスタイルを設定するために戻って構文解析することです。

あるいはSteinが示唆しているように、できるなら2つのクラスを追加するだけです。

.foo {}
.foo.last {}


0


.parent_class div:first-child + div

最初の子と ``セレクタ 'をつなげて2番目の `div`を見つけるために上記を使いました。