web-dev-qa-db-ja.com

特定のクラス名を持つ最初、2番目、または3番目の要素を選択する方法？

要素のリストから特定の要素を選択するにはどうすればよいですか？私は次のものを持っています：

<div class="myclass">my text1</div>
<!-- some other code follows -->
<div>
    <p>stuff</p>
</div>
<div>
    <p>more stuff</p>
</div>
<p>
    <span>Hello World</span>
</p>
<div class="myclass">my text2</div>
<!-- some other code follows -->
<div>
    <p>stuff</p>
</div>
<p>
    <span>Hello World</span>
</p>
<input type=""/>
<div class="myclass">my text3</div>
<!-- some other code follows -->
<div>
    <p>stuff</p>
</div>
<footer>The end</footer>

もちろん、すべてに適用されるCSSクラスdiv.myclass {doing things}がありますが、クラス.myclassの最初、2番目、または3番目のdivも選択できるようにしたかったのですマークアップ内の場所：

div.myclass:first {color:#000;} 
div.myclass:second {color:#FFF;} 
div.myclass:third {color:#006;}

JQueryインデックス選択.eq( index )とほぼ同じです。これは現在使用しているものですが、スクリプトなしの代替が必要です。

具体的には、別のクラスを追加したり、IDを使用して機能させるようなものではなく、擬似セレクターを探しています。

csscss-selectorspseudo-class
68
Tumharyyaaden

おそらく、この質問を投稿してから今日までの間にこれを実現したのでしょうが、セレクターの性質上、階層的に無関係なHTML要素をナビゲートすることは不可能です。

または、簡単に言うと、コメントの中で

均一な親コンテナはありません

...セレクターだけでは不可能です。他の回答で示されているように、何らかの方法でマークアップを変更することはできません。

have jQuery .eq()ソリューションを使用します。

30
BoltClock

nth-child（アイテム番号）EXを使用

<div class="parent_class">
    <div class="myclass">my text1</div>
    some other code+containers...

    <div class="myclass">my text2</div>
    some other code+containers...

    <div class="myclass">my text3</div>
    some other code+containers...
</div>
.parent_class:nth-child(1) { };
.parent_class:nth-child(2) { };
.parent_class:nth-child(3) { };

OR

：nth-​​of-type（item number）コードと同じ

.myclass:nth-of-type(1) { };
.myclass:nth-of-type(2) { };
.myclass:nth-of-type(3) { };
58
Bdwey

はい、これを行うことができます。たとえば、テーブルのさまざまな列を構成するtdタグのスタイルを設定するには、次のようにします。

table.myClass tr > td:first-child /* First column */
{
  /* some style here */
}
table.myClass tr > td:first-child+td /* Second column */
{
  /* some style here */
}
table.myClass tr > td:first-child+td+td /* Third column */
{
  /* some style here */
}
14
David

これは、答えではなく答えではありません。つまり、なぜ 上記の高い投票の答えの1つ が実際に間違っているのかを示す例です。

その答えは良さそうだと思いました。実際、それは私が探していたものを与えてくれました：:nth-of-type、これは私の状況ではうまくいきました。 （だから、@ Bdweyに感謝します。）

最初に@BoltClockによるコメントを読んで（答えは本質的に間違っていると言っています）、ユースケースをチェックしたので、それを却下しました。それから、@ BoltClockには300,000+（！）という評判があり、CSSの第一人者であると主張するプロファイルがあることに気付きました。うーん、私はもう少しよく見るべきだと思った。

次のようになります：div.myclass:nth-of-type(2)は、「div.myclassの2番目のインスタンス」を意味しません。むしろ、「divの2番目のインスタンスで、「myclass」クラスも必要です」という意味です。 div.myclassインスタンス間にdivsが介在する場合、これは重要な違いです。

これを回避するのに時間がかかりました。だから、他の人がより速く理解するのを助けるために、私は書かれた説明よりも概念をより明確に示すと信じる例を書いた：私はh1、h2、h3およびh4要素は、本質的にdivsになります。それらのいくつかにAクラスを配置し、それらを3つにグループ化し、h?.A:nth-of-type(?)を使用して、1番目、2番目、3番目のインスタンスを青、オレンジ、緑に色付けしました。 （ただし、注意深く読んでいる場合は、「何の最初、2番目、3番目のインスタンス？」と尋ねる必要があります）。また、異なる（つまり、異なるhレベル）または類似の（つまり、同じhレベル）未分類の要素をいくつかのグループに挿入しました。

特に3の最後のグループ化に注意してください。ここでは、クラス化されていないh3要素が最初と2番目のh3.A要素の間に挿入されます。この場合、2番目の色（つまりオレンジ）は表示されず、3番目の色（つまり緑）はh3.Aの2番目のインスタンスに表示されます。これは、h3.A:nth-of-type(n)のnがh3sではなくh3.Asをカウントしていることを示しています。

まあ、それが役立つことを願っています。そして、ありがとう、@ BoltClock。

div {
  margin-bottom: 2em;
  border: red solid 1px;
  background-color: lightyellow;
}

h1,
h2,
h3,
h4 {
  font-size: 12pt;
  margin: 5px;
}

h1.A:nth-of-type(1),
h2.A:nth-of-type(1),
h3.A:nth-of-type(1) {
  background-color: cyan;
}

h1.A:nth-of-type(2),
h2.A:nth-of-type(2),
h3.A:nth-of-type(2) {
  background-color: orange;
}

h1.A:nth-of-type(3),
h2.A:nth-of-type(3),
h3.A:nth-of-type(3) {
  background-color: lightgreen;
}
<div>
  <h1 class="A">h1.A #1</h1>
  <h1 class="A">h1.A #2</h1>
  <h1 class="A">h1.A #3</h1>
</div>

<div>
  <h2 class="A">h2.A #1</h2>
  <h4>this intervening element is a different type, i.e. h4 not h2</h4>
  <h2 class="A">h2.A #2</h2>
  <h2 class="A">h2.A #3</h2>
</div>

<div>
  <h3 class="A">h3.A #1</h3>
  <h3>this intervening element is the same type, i.e. h3, but has no class</h3>
  <h3 class="A">h3.A #2</h3>
  <h3 class="A">h3.A #3</h3>
</div>
11
Andrew Willems

おそらくCSSの「〜」セレクターを使用していますか？

.myclass {
    background: red;
}

.myclass~.myclass {
    background: yellow;
}

.myclass~.myclass~.myclass {
    background: green;
}

jsfiddle の私の例を参照してください

8
Netsi1964