CSS3セレクターの2部門では同じクラス

StackOverflow https://stackoverflow.com/questions/306062

  •  08-07-2019
  •  | 
  •  

質問

が必要でCSSセレクタでは第2部の2と同じクラスです。私た nth-child() なんかを見ることのできな方にはさらに明らかになりました。これらの2divsする兄弟姉妹の文書が役立っています。

私のHTMLするとどうなるのかわかりません

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

い、第2部です。バー（または最後の部です。コフレンドリーホテルの仕事があります。

役に立ちましたか？

解決

更新:この答えた2008年当時の nth-of-type 支援した信頼できない。今日、私からの指示に従うことができ安心してお使い頂けのようなもの .bar:nth-of-type(2), ない限り、ご支援IE8高齢者となります。

独自の回答から2008年に次のようなおりませんこう!):

使いいただけるのであれば 試作JS 利用することができコードックスタイル値、または追加の別のクラス名:

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

(なかった試験このコードでないことを確認し実際には第二本部長現在でもこのようにすべきます。)

がん発生のhtml serversideそばとともに、超クラスの商品...

他のヒント

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

.bar:nth-child(2)

は、「クラス bar ＆quot;を持つもの」を意味します。これは2番目の子でもあります。

私の答えに関して :nth-of-type は、単に間違っています。コーポールポインティングしてしまっている。

のタイプがみを指すのではなく"要素型"のよう div).ここで示されているデータのセレクタ div.bar:nth-of-type(2) や div:nth-of-type(2).bar 平均同じことをしているのです。両方を選択している要素[a]の 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 セレクタをクローズします。

ご希望の場合は 第二に、昨 特定の種類の要素(または全てを、一般の兄弟セレクタも作:

.bar ~ .bar

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

でも短縮できます。もちろん、嫌いに重複コードす。:-)

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>

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

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;}

デモ https://jsfiddle.net/ssuryar/6ka13xve/

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

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

HTML：

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

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

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

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

.foo {}
.foo.last {}

.parent_class div:first-child + div

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

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top