web-dev-qa-db-ja.com

n番目-mod（またはモジュロ）演算子を持つ子

nth-childをモジュロで使用することは可能ですか？次のような式を指定できることは知っています

nth-child(4n+2)

しかし、モジュロ演算子があるかどうかはわかりません。以下の例を試しましたが、どれも機能していないようです。

nth-child(n%7)
nth-child(n % 7)
nth-child(n mod 7)
csscss-selectorsmodulo
18
jefflunt

いいえ、 :nth-child() は、加算、減算、および 係数乗算 のみをサポートします。

最初の6つの要素を取得しようとしていると思います（正の整数の場合は_n mod 7_ nは_0_から_6_のみを提供します）。そのために、代わりに次の式を使用できます。

_:nth-child(-n+6)
_

nを否定することにより、要素のカウントはゼロから逆方向に行われるため、次の要素が選択されます。

_ 0 + 6 = 6
-1 + 6 = 5
-2 + 6 = 4
-3 + 6 = 3
-4 + 6 = 2
-5 + 6 = 1
...
_

jsFiddleデモ

20
BoltClock

nth-childをモジュロkとともに使用する場合は、次のように指定します。

nth-child(kn)

たとえば、、6、9、..要素のスタイルを指定する場合は、（k = 3）を指定して、次を使用します。

nth-child(3n)

オフセットを指定することもできます。

nth-child(kn+offset)
25
Athlan

このトピックは非常に古いことは知っていますが、モジュロ演算子に十分近い答えは次のとおりです。

:not(:nth-child(7n))

これにより、要素1〜6、8〜13などが選択されます。

:nth-child(an)

上記のコードは「a」で割り切れる要素を選択するため、：not（）セレクターを追加すると、CSSは「a」で割り切れない要素を選択します。

私は誰かがそれが役に立つと思うことを願っています;）

9
Enethion

このトピックは非常に古いことは知っていますが、答えは次のとおりです。

    .parent :nth-child(4n):nth-last-child(2) ~ *,
    .parent :nth-child(4n):nth-last-child(3) ~ *,
    .parent :nth-child(4n):nth-last-child(4) ~ * {
        color: gold;
    }

このセレクターは、n番目の子の数式で示されるグループ化された子の最後の完全なセットの最後の子の後にあるすべての子を対象とします。

1
Aaron Cicali

n=2でモジュール化したい場合は、偶数または奇数を使用できます。

tr:nth-child(even) {
  background-color: #dddddd;
}
0
Maddocks