Nth-Child with Mod (Or Modulo) Operator

nth-child with mod (or modulo) operator

No, :nth-child() only supports addition, subtraction and coefficient multiplication.

I gather you're trying to pick up the first 6 elements (as n mod 7 for any positive integer n only gives you 0 to 6). For that, you can use this formula instead:

:nth-child(-n+6)

By negating n, element counting is done backwards starting from zero, so these elements will be selected:

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

jsFiddle demo

Modulo css nth-child

As mentioned here, :nth-child() does not support modulo operations. That said, this problem can still be solved using :nth-child().

We can see that the diff between each states are : 7 then 5 then 7 then 5 ...

The sum of 5 and 7 is 12. What you have, essentially, are two sequences with intervals of 12, just with slightly different starting points such that the difference between every two points alternates between 5 and 7. Here's a diagram to show you what I mean:

|---------------- 12 ----------------|--------------- 12 ----------------|
1  2  3  4  5  6  7  8  9  10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
                     |-----------------12-----------------|
|--------- 7 --------|------ 5 ------|--------- 7 --------|------ 5 -----|

With this in mind, for the sequence that starts with 1 followed by 8, use div:nth-child(12n+1) and div:nth-child(12n+8). The same follows with the other sequences.

Thus:

div {

  height: 40px;

}

/* 1, 8, 13, 20, 25... */

div:nth-child(12n+1),

div:nth-child(12n+8) {

  background-color: blue;

}

/* 4, 9, 16, 21... */

div:nth-child(12n+4),

div:nth-child(12n+9) {

  background-color: green;

}

/* 5, 12, 17, 24... */

div:nth-child(12n+5),

/* Note: 12n+12, 12n+0, and 12n are all equivalent */

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

  background-color: orange;

}

<div class="blue">blue</div>

<div class="white">white</div>

<div class="white">white</div>

<div class="green">green</div>

<div class="orange">orange</div>

<div class="white">white</div>

<div class="white">white</div>

<div class="blue">blue</div>

<div class="green">green</div>

<div class="white">white</div>

<div class="white">white</div>

<div class="orange">orange</div>

<div class="blue">blue</div>

<div class="white">white</div>

<div class="white">white</div>

<div class="green">green</div>

<div class="orange">orange</div>

<div class="white">white</div>

<div class="white">white</div>

<div class="blue">blue</div>

<div class="green">green</div>

<div class="white">white</div>

<div class="white">white</div>

<div class="orange">orange</div>

Using modulus in css calc function

Unfortunately, there is no more mention of the mod operator in recent specs.

The calc() function allows mathematical expressions with addition (+), subtraction (-), multiplication (*), and division (/) to be used as component values.

You may want to resort to using javascript to achieve such behaviour.

var el = document.getElementById('element-id');
el.style.width = (100 % 5) + '%';

Built-in mod ('%') vs custom mod function: improve the performance of modulus operation

According to Chandler Carruth's benchmarks at CppCon 2015, the fastest modulo operator (on x86, when compiled with Clang) is:

int fast_mod(const int input, const int ceil) {
    // apply the modulo operator only when needed
    // (i.e. when the input is greater than the ceiling)
    return input >= ceil ? input % ceil : input;
    // NB: the assumption here is that the numbers are positive
}

I suggest that you watch the whole talk, he goes into more details on why this method is faster than just using % unconditionally.

Css3 calc function : issue with mod operator

1) It looks like only IE supports the mod operator and it does function as you thought.

2) You need to add px on the units of the modulo (as C-link mentioned)

3) As @Harry mentioned, the current spec has dropped the mod operator from the calc function

FIDDLE - (try it on Internet explorer)

Sample markup -

<div class="container">
    <div class="no">no calc</div>
    <div class="simple">simple</div>
    <div class="mod1">mod1</div>
    <div class="mod2">mod2</div>
    <div class="mod3">mod3</div>
    <div class="mod4">mod4</div>
</div>

CSS (test cases)

.container {
    width: 450px;
    border: 1px solid black;
}
.no {
   background:aqua; 
}
.simple {
    width:calc(100% - 100px);
    background:green;
}
.mod1 {
    width:calc(100% mod 200px); /* = 450 % 200 = 50px */
    background:red;
}
.mod2 {
    width:calc(100% mod 300px); /* = 450 % 300 = 150px */
    background:brown;
}
.mod3 {
    width:calc(100% mod 50px); /* = 450 % 50 = 0 */
    background:orange;
}
.mod4 {
    width:calc(50% mod 100px); /* = 225 % 100 = 25px */
    background:yellow;
}

:visible not working with :nth-child selector

You can't get this with pure CSS, so change your filter to a function that checks to see if the index of the item is divisible by 3:

$itemShow.filter(function(i){ return i % 3 === 0; }).addClass('clear-left');

http://jsbin.com/OVewUkaM/1/edit

This uses the Modulus operator. It gives you the remainder when dividing two numbers.

0 % 3;  // 0
1 % 3;  // 1
2 % 3;  // 2
3 % 3;  // 0
4 % 3;  // 1
5 % 3;  // 2
6 % 3;  // 0

Edit: But I prefer to do this sort of thing with pure CSS by limiting the width of the container.

.grid {
  margin-left: -30px;
  width: 606px
}

http://jsbin.com/oXeGeGus/2/edit

---

Related Topics