web-dev-qa-db-ja.com

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

同じクラスを持つ2番目のdivを見つけることができるCSSセレクターが必要です。私はnth-child()を見ましたが、私が望むクラスをさらに明確にする方法を見つけることができないので、それは私が望むものではありません。これらの2つのdivは、それが役立つ場合、ドキュメント内の兄弟になります。

私のHTMLは次のようになります。

<div class="foo">...</div>
<div class="bar">...</div>
<div class="baz">...</div>
<div class="bar">...</div>

そして、2番目のdiv.barが必要です（または最後のdiv.barも機能します）。

csscss3
25
mpeters

[〜＃〜] update [〜＃〜]：この回答は、元々2008年に_nth-of-type_サポートが信頼できなかったときに書かれたものです。今日、IE8以前をサポートする必要がない限り、.bar:nth-of-type(2)のようなものを安全に使用できると思います。

2008年からの元の回答が続きます（これはもうお勧めしません！）：

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番目のアイテムに追加のクラスを追加することもできます。

25
Stein G. Strindhaug

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

.bar:nth-child(2)

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

38
geocar

_:nth-of-type_に関する私の元の答えは単に間違っています。これを指摘してくれたポールに感謝します。

そこにある「タイプ」という単語は、「要素タイプ」のみを指します（divなど）。セレクターdiv.bar:nth-of-type(2)とdiv:nth-of-type(2).barは同じことを意味することがわかります。 [a]が親の2番目のdivであり、[b]がクラスbarである要素を選択します。

だから、特定のセレクターの最初の要素を除くすべての要素を選択したい場合、私が知っている唯一の純粋なCSSソリューションは、一般的な兄弟セレクターです：

_.bar ~ .bar
_

http://www.w3schools.com/cssref/sel_gen_sibling.asp

元の（間違った）答えは次のとおりです：

CSS3の登場により、別のオプションがあります。質問が最初に尋ねられたときには利用できなかったかもしれません：

_.bar:nth-of-type(2)
_

http://www.w3schools.com/cssref/sel_nth-of-type.asp

これにより、_.bar_セレクターを満たす2番目の要素が選択されます。

特定の種類の要素（または最初のものを除くすべて）のsecondおよびlastが必要な場合、一般的な兄弟セレクターも正常に機能します。

_.bar ~ .bar
_

http://www.w3schools.com/cssref/sel_gen_sibling.asp

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

24
mhelvens

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

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

[〜＃〜] css [〜＃〜]

.foo:nth-child(2)

[〜＃〜] html [〜＃〜]

<div>
 <div class="foo"></div>
 <div class="foo">Find me</div>
...
</div>

ただし、次のHTMLがある場合は機能しません。

<div>
 <div class="other"></div>
 <div class="foo"></div>
 <div class="foo">Find me</div>
 ...
</div>

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

13
Seamus

[〜＃〜] html [〜＃〜]

<h1> Target Bar Elements </h1>

<div class="foo">Foo Element</div>
<div class="bar">Bar Element</div>
<div class="baz">Baz Element</div>
<div class="bar">Bar Second Element</div>
<div class="jar">Jar Element</div>
<div class="kar">Kar Element</div>
<div class="bar">Bar Third Element</div>

[〜＃〜] css [〜＃〜]

.bar {background:red;}
.bar~.bar {background:green;}
.bar~.bar~.bar {background:yellow;}

[〜＃〜] demo [〜＃〜]https://jsfiddle.net/ssuryar/6ka13xve/

9
Surya R Praveen

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

$('.foo:eq(1)').css('color', 'red');

HTML：

<div>
  <div class="other"></div>
  <div class="foo"></div>
  <div class="foo">Find me</div>
  ...
6
Timon

Javascriptでこれを実行できない理由はありますか？私のアドバイスは、セレクターをユニバーサルルール（.foo）そして、解析してJavascriptで最後のfooを取得し、必要な追加のスタイルを設定します。

または、Steinが提案するように、可能であれば次の2つのクラスを追加します。

<div class="foo"></div>
<div class="foo last"></div>

.foo {}
.foo.last {}
2
One Crayon
.parent_class div:first-child + div

上記を使用して、最初の子を+セレクターでチェーンすることにより、2番目のdivを見つけました。

1
Eric Hendrickson