21

プレーンな CSS で 3 番目の要素ごとにスタイルを設定するにはどうすればよいですか。

このような質問を見たことがありますが、JavaScript が関係しています。プレーンな CSS ソリューションが必要です。evenoroddを使用できることはわかっています:nth-childが、:nth-child(third)機能しません。:nth-child(3)

例：

<section>
  <div class="someclass"></div>             STYLE
  <div id="someId"></div>                   DON'T STYLE
  <div class="someotherclass"></div>        DON'T STYLE
  <div id="someotherId"></div>              STYLE
  <div class="someclass"></div>             DON'T STYLE
  <div id="someId"></div>                   DON'T STYLE
  <div class="someotherclass"></div>        STYLE
</section>

これは CSS で可能ですか? JavaScript や jQuery はありませんか?

4

8 に答える 8

52

これは純粋な CSSで可能です。JavaScript は必要ありません。

nth-child セレクターを使用します。1

section > div:nth-child(3n+1) {
    background:red;
}

'1' はスタイルの開始位置で、3 は 3 番目の要素ごとにスタイルを設定する必要があることを示します。こちらでより詳しく説明されています。

jsFiddle のデモはこちら。

1注 - 他の人が言及しているように、これはIE8 以下では完全にはサポートされていません。

于 2013-09-17T22:15:56.637 に答える
8

ライブラリによる IE サポート

探しているのが IE サポートであれば、Selectivzrというすばらしいライブラリがあり、IE バージョン 6 ～ 8 で CSS3 セレクターを有効にできます。

IE には役立たないが、:nth-child を使用せずに行われるハック

それ以外の場合、私が提供できるのは、+隣接する兄弟セレクターを使用した醜いハックです (CSS2 標準で定義されていますが、IE8 以下ではデフォルトで使用できません)。

div {
    width: 40px;
    height: 40px;
    background-color: blue;
}

div + div,
div + div + div + div + div { width: 100px }

div + div + div + div,
div + div + div + div + div + div + div { width: 40px }

JSFiddle

このパターンはほとんどの CSS プリコンパイラ (つまりSASS ) で生成できますが、必要な要素の量によって制限されます。

結論

探しているのが IE のサポートだけなら、次に、 Selectivzrなどのライブラリを使用することを強くお勧めします。これにより、IE6-8 の頭痛の種から解放されます。

より良い解決策についてひらめきがあれば、投稿します。

于 2013-09-20T02:25:26.327 に答える
4 
section div:nth-child(3n+3) {  
    color: #ccc;
}

選択された要素:

(3xn)+3 :
(3 x 0) + 3 = 3 = 3rd Element
(3 x 1) + 3 = 6 = 6th Element
(3 x 2) + 3 = 9 = 9th Element
etc.

次のように読むことができます：

(3 番目の要素をすべて選択) 3 から開始

ここに、デモとして必要なものがすべて揃っています

http://css-tricks.com/examples/nth-child-tester/

詳細はこちら http://css-tricks.com/useful-nth-child-recipies/

http://css-tricks.com/how-nth-child-works/

奇数または偶数のみを選択:

section div:nth-child(odd) {

}

section div:nth-child(even) {

    }

最初の 5 つだけを選択

div:nth-child(-n+5) {

}
于 2013-09-20T02:14:18.587 に答える
4

純粋な CSS、Javascript なし、IE7/8 をサポート

HTML の変更が必要、または...

HTML で変更する要素に何らかのクラスを明示的に設定する必要があります。これは、サーバー側のスクリプト カウントを使用して動的に行うか、ハード コーディングによって手動で行います。

デモフィドル

HTML

<section>
  <div class="someclass explicitClass"></div>
  <div id="someId"></div>
  <div class="someotherclass"></div>
  <div id="someotherId" class="explicitClass"></div>
  <div class="someclass"></div>
  <div id="someId"></div>
  <div class="someotherclass explicitClass"></div>   
</section>

CSS

.explicitClass {
    your-property-to-change: your-value-desired;
}

... 広範な CSS マークアップが必要

または、かさばる方法で「カウント」する CSS を生成する必要があります。Indy が彼の回答で指摘したように (隣接する兄弟が「IE8 以下ではデフォルトで利用できない」と述べた理由は不明です。これは正しくないためです)、これは CSS プリプロセッサを介して処理できますが、それでも、実際にはそうではありません。要素の数が非常に限られている場合を除き、おそらくあなたの例に投稿した数よりも多くない限り、このルートに行きたいと思います。何百もの要素があった場合、これは実用的ではありません。このソリューションでは、HTML を変更する必要はありません。

デモフィドル

CSS

section div:first-child,
section div:first-child + div + div + div,
section div:first-child + div + div + div + div + div + div {
    your-property-to-change: your-value-desired;
}

最終的に、私は JoshC と Indy に同意します

上記の回答を提供したのは、自分が言いたいことが本当に欲しい場合に何をしなければならないかを示すためだけです. それが私だったら、これらのスタイルの変更を 3 要素ごとに行うことが絶対に不可欠でない限り (したがって、javascript をオフにすることはスキーム全体にとって致命的であり、それを回避して非 javascript のスタイルを変更することもできます)、私は使用します。 JoshCの回答をCSSとして使用し、何らかの形式のjavascriptソリューションを使用して下位互換性を確保します（Indyが指摘したように、または他の形式のjavascriptソリューション）。

于 2013-09-21T13:30:49.200 に答える
2 
section > div:nth-child(3n+1) {
    background:red;
}

このスタイルは問題を解決するのに適していますが、「>」記号は古いブラウザー (IE5、IE6、IE7 など) ではサポートされていません。. .

しかし、私は「>」記号なしで、この方法を好みます

section div:nth-child(3n+1) {
    background:red;
}
于 2013-09-22T13:22:31.783 に答える
2

あなたが使用することができます

.my-class:nth-child(odd) {}

また

.my-class:nth-child(2n+1) {}
于 2013-09-20T02:24:47.603 に答える
1

可能な解決策は

section div:nth-child(3n+1) {  
    color: #ccc;
}

上記のコードは、要求に応じて最初の要素から始まる 3 番目の要素ごとにスタイルを設定します。「+ 記号」の
後の数字を変更して、開始要素を設定します。n 文字 の前の数字を変更して、後の要素をスタイル設定するように設定します

于 2013-09-20T05:34:03.893 に答える
0

純粋な css を使用すると、これを簡単に行うことができます。CSS セレクターを定義して、目的の子プロパティを変更できます。あなたのケースには以下が適しています。

section > div:nth-child(3n+1) {
    background: green;
}

これがどのように機能するか。

疑似要素と疑似クラス

ここでは、以下のように動作します

if n = 0 then 3*0 + 1 = 1
if n = 1 then 3*1 + 1 = 4
if n = 2 then 3*2 + 1 = 7
if n = 3 then 3*3 + 1 = 10
...........

3番目の要素ごとに必要な場合、cssは次のようになります

section > div:nth-child(3n+3) {
    background: green;
}

ここでは、以下のように動作します

if n = 0 then 3*0 + 3 = 3
if n = 1 then 3*1 + 3 = 6
if n = 2 then 3*2 + 3 = 9
if n = 3 then 3*3 + 3 = 12
...........
于 2013-12-06T12:41:50.463 に答える