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 CSS :nth-child to create loop with 5 different designs repeated every 5 items
The problem is how you're defining the formula. The formula in the nth-child selector goes as follows:
nth-child(an+b)
Where a is the size of your cycle (in your case, 5), and b is the offset value (or modulo).
Here's a working snippet:
.collection-list:nth-child(5n+0) .collection-item {background-color: red;}.collection-list:nth-child(5n+1) .collection-item {background-color: blue;}.collection-list:nth-child(5n+2) .collection-item {background-color: green;}.collection-list:nth-child(5n+3) .collection-item {background-color: yellow;}.collection-list:nth-child(5n+4) .collection-item {background-color: purple;}
<div class="collection-list"><div class="collection-item">1</div></div><div class="collection-list"><div class="collection-item">2</div></div><div class="collection-list"><div class="collection-item">3</div></div><div class="collection-list"><div class="collection-item">4</div></div><div class="collection-list"><div class="collection-item">5</div></div><div class="collection-list"><div class="collection-item">6</div></div><div class="collection-list"><div class="collection-item">7</div></div><div class="collection-list"><div class="collection-item">8</div></div><div class="collection-list"><div class="collection-item">9</div></div><div class="collection-list"><div class="collection-item">10</div></div>
Repeat nth-child values
You can use .box:nth-child(4n+x)
as your selector. This answer explains it well.
.container { display: grid; grid-template-columns: 100px 100px 100px 100px;}
.box { border: 1px solid black; height: 100px;}
.box:nth-child(4n+1) { background: red;}
.box:nth-child(4n+2) { background: blue;}
.box:nth-child(4n+3) { background: yellow;}
.box:nth-child(4n+4) { background: pink;}
<div class="container"> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div></div>
Can I combine :nth-child() or :nth-of-type() with an arbitrary selector?
This is a very common problem that arises due to a misunderstanding of how :nth-child(An+B)
and :nth-of-type()
work.
In Selectors Level 3, the :nth-child()
pseudo-class counts elements among all of their siblings under the same parent. It does not count only the siblings that match the rest of the selector.
Similarly, the :nth-of-type()
pseudo-class counts siblings sharing the same element type, which refers to the tag name in HTML, and not the rest of the selector.
This also means that if all the children of the same parent are of the same element type, for example in the case of a table body whose only children are tr
elements or a list element whose only children are li
elements, then :nth-child()
and :nth-of-type()
will behave identically, i.e. for every value of An+B, :nth-child(An+B)
and :nth-of-type(An+B)
will match the same set of elements.
In fact, all simple selectors in a given compound selector, including pseudo-classes such as :nth-child()
and :not()
, work independently of one another, rather than looking at the subset of elements that are matched by the rest of the selector.
This also implies that there is no notion of order among simple selectors within each individual compound selector1, which means for example the following two selectors are equivalent:
table.myClass tr.row:nth-child(odd)
table.myClass tr:nth-child(odd).row
Translated to English, they both mean:
Select any
tr
element that matches all of the following independent conditions:
- it is an odd-numbered child of its parent;
- it has the class "row"; and
- it is a descendant of a
table
element that has the class "myClass".
(you'll notice my use of an unordered list here, just to drive the point home)
Selectors level 4 seeks to rectify this limitation by allowing :nth-child(An+B of S)
2 to accept an arbitrary selector argument S, again due to how selectors operate independently of one another in a compound selector as dictated by the existing selector syntax. So in your case, it would look like this:
table.myClass tr:nth-child(odd of .row)
Of course, being a brand new proposal in a brand new specification, this probably won't see implementation until a few years down the road.
In the meantime, you'll have to use a script to filter elements and apply styles or extra class names accordingly. For example, the following is a common workaround using jQuery (assuming there is only one row group populated with tr
elements within the table):
$('table.myClass').each(function() {
// Note that, confusingly, jQuery's filter pseudos are 0-indexed
// while CSS :nth-child() is 1-indexed
$('tr.row:even').addClass('odd');
});
With the corresponding CSS:
table.myClass tr.row.odd {
...
}
If you're using automated testing tools such as Selenium or scraping HTML with tools like BeautifulSoup, many of these tools allow XPath as an alternative:
//table[contains(concat(' ', @class, ' '), ' myClass ')]//tr[contains(concat(' ', @class, ' '), ' row ')][position() mod 2)=1]
Other solutions using different technologies are left as an exercise to the reader; this is just a brief, contrived example for illustration.
1 If you specify a type or universal selector, it must come first. This does not change how selectors fundamentally work, however; it's nothing more than a syntactic quirk.
2 This was originally proposed as :nth-match()
, however because it still counts an element relative only to its siblings, and not to every other element that matches the given selector, it has since as of 2014 been repurposed as an extension to the existing :nth-child()
instead.
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) + '%';
Related Topics
Styling HTML and Body Selector to Height: 100%; Vs Using 100Vh
There Is a 4Px Gap Below Canvas/Video/Audio Elements in HTML5
How to Align 3 Divs Side by Side
Limit Text to The Width of Sibling Image/Auto Width in CSS
How to Create Responsive Text on Top of an Image
Horizontal Scroll in Div with Many Small Div's Inside (No Text)
Stretch Horizontal Ul to Fit Width of Div
HTML5 Image Icon to Input Placeholder
100% Div Width Is Not Really 100%
Adding CSS Border Changes Positioning in HTML5 Webpage
Background-Image Doesn't Appear If <Div> Is Empty
Jquery-Ui Datepicker CSS Problem
CSS Background Image Centered with Stellar Js
CSS Webkit Transition - Fade Out Slowly Than Fade In
Media Query for iPad (Landscape) Applied to Samsung Galaxy Tab 2 (Landscape) as Well