96

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

<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}にクラスの最初、2 番目、または 3 番目の div を選択できるようにしたいと考えていました。.myclass

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

.eq( index )私が現在使用しているものであるjQuery index selection とほぼ同じですが、スクリプトのない代替手段が必要です。

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

4

6 に答える 6

81

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

また

:nth-of-type(item number) コードと同じ

.myclass:nth-of-type(1) { };
.myclass:nth-of-type(2) { };
.myclass:nth-of-type(3) { };
于 2012-12-15T02:35:45.687 に答える
35

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

または、簡単に言えば、コメントで次のように言ったので

統一された親コンテナはありません

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

jQueryソリューションを使用する必要があります。.eq()

于 2011-08-28T09:56:16.003 に答える
21

これは、非回答ほどの回答ではありません。つまり、上記の投票数の多い回答の1つが実際に間違っている理由を示す例です。

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

私は最初に @BoltClock のコメント (答えが本質的に間違っていると言っています) を読み、ユースケースを確認したのでそれを却下しましたが、うまくいきました。その後、@BoltClock の評判が 300,000+(!) あり、CSS の第一人者であると主張するプロフィールがあることに気付きました。うーん、もう少し近づいて見てみようかなと思いました。

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

これを理解するのに時間がかかりました。h1そこで、他の人がもっと早く理解できるように、文章で説明するよりも概念をより明確に示してh2いるh3とh4思われる例を書きましたdiv。それらのいくつかにクラスを配置Aし、それらを 3 つにグループ化し、1 番目、2 番目、3 番目のインスタンスを青、オレンジ、緑にh?.A:nth-of-type(?). (しかし、注意深く読んでいるなら、「何の 1 番目、2 番目、3 番目のインスタンスか?」と尋ねているはずです)。また、いくつかのグループに、類似していない (つまり、異なるhレベルの) または類似の (つまり、同じhレベルの) 分類されていない要素を挿入しました。

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

それが役立つことを願っています。ありがとう、@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>

于 2016-02-24T21:54:47.343 に答える
20

はい、できます。たとえば、テーブルのさまざまな列を構成する 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 */
}
于 2011-10-29T01:13:02.270 に答える
10

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

.myclass {
    background: red;
}

.myclass~.myclass {
    background: yellow;
}

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

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

于 2015-01-15T21:19:39.627 に答える