web-dev-qa-db-ja.com

nth-childはクラスセレクターに応答しません

想定されていない場合を除き、クラスセレクターを確認する_nth-child_を取得できないようです。

別のdiv内に4つのdivがあり、すべてのクラスとIDがあります。上記のクラスでdivの最初のインスタンスを選択する必要があります。例えば：

_#content .foo:nth-child(1) { margin-top: 0; }
_

そして明らかに同じ効果を得るために_first-child_を使用しても、どのdivにも影響しません。

今、私はそれをそのdivで動作するように強制したい場合、私はこれを行うことができます：

_#content .foo:nth-child(3) { margin-top: 0; }
_

#contentの3番目のdivになりますが、このクラスで何かの最初のインスタンスを取得する必要があるため、これは無意味です。

_<div id="content">  
  <div id="action-bar"> </div>
  <div id="message"> </div>
  <div class="table"> </div>
  <div class="clear"> </div>
</div>
_

これがHTMLのサンプルです。私は_nth-of-type_を次のように試しました：

_#content .table:nth-of-type(1) { margin: 0 }
_

ここでも、nth-of-type(3)と言ったときにのみ応答します。

編集：

私が抱えている問題の実例を作成しました： http://jsfiddle.net/aHwS8/

csscss-selectors
31
stuartc

代わりに :nth-of-type() pseudo-selector を試してください：

_#content .foo:nth-of-type(1) { margin-top: 0; }
_

:nth-of-type()は同じ名前の要素をカウントすることに注意してください。したがって、.foo:nth-of-type(1)はクラスfooを持つ最初の要素を選択しませんが、グループ化された要素のリストの最初の要素は選択します同じ名前で。このようなドキュメントがある場合：

_<div>
    <i class="foo">1</i><i>x</i><i class="foo">2</i>
    <b class="foo">3</b><b>x</b><b class="foo">4</b>
</div>
_

.foo:nth-of-type(1)は、エレメント_<i class="foo">1</i>_および_<b class="foo">3</b>_を選択します。両方とも独自のタイプの最初のものです。

37
Gumbo

これは古い投稿ですが、私はここで同様の問題の答えを探しました。おそらくこれは誰かを助けるでしょう。

次の構造があり、n番目の「foo」-divを選択します。

<body>
  <div class='container'>
    <div class='foo'></div>
  </div>
  <div class='container'>
     <div class='foo'></div>
  </div>
  <div class='container'>
     <div class='foo'></div>
  </div>
  <div class='container'>
     <div class='foo'></div>
  </div>
</body>

トリックは「戻る」ことで、親要素を繰り返し兄弟で選択します。この場合。containerを選択します子供達）：

.container:nth-of-type(3) .foo {
    styles here
}
7
fhollste

あなたは間違ったセレクタを使用していると思います、試してください：

#content .foo:first-of-type { margin-top: 0; }
0
Jake