类型n不能按需工作

Question

I am doing responsive website. My HTML code is as given below:

<h2>Title</h2>
<div class="column-5">...</div>
<div class="column-5">...</div>
<div class="column-5">...</div>
<div class="column-5">...</div>
<div class="column-5">...</div>
<div class="column-5">...</div>
<h2>Title</h2>
<div class="column-5">...</div>
<div class="column-5">...</div>
<div class="column-5">...</div>
<div class="column-5">...</div>
<div class="column-5">...</div>
<div class="column-5">...</div>
<div class="column-5">...</div>
<div class="column-5">...</div>
<div class="column-5">...</div>
<div class="column-5">...</div>
<div class="column-5">...</div>
<div class="column-5">...</div>

CSS is like this:

.column-5{width:18.4%; margin-right:2%;}
.column-5:last-child{margin-right:0;}

and my JS like

$('.column_5:nth-of-type(5n+5)').addClass('last-child')

The output the above code currently produces is as follows:

<h2>Title</h2>
<div class="column-5">...</div>
<div class="column-5">...</div>
<div class="column-5">...</div>
<div class="column-5">...</div>
<div class="column-5 last-child">...</div>
<div class="column-5">...</div>
<h2>Title</h2>
<div class="column-5">...</div>
<div class="column-5">...</div>
<div class="column-5">...</div>
<div class="column-5 last-child">...</div>
<div class="column-5">...</div>
<div class="column-5">...</div>
<div class="column-5">...</div>
<div class="column-5">...</div>
<div class="column-5 last-child">...</div>
<div class="column-5">...</div>
<div class="column-5">...</div>
<div class="column-5">...</div>

However, what I am expecting/need is the below. Effectively, I need the last-child class to be added to every 5th consecutive element with the column-5 class.

<h2>Title</h2>
<div class="column-5">...</div>
<div class="column-5">...</div>
<div class="column-5">...</div>
<div class="column-5">...</div>
<div class="column-5 last-child">...</div>
<div class="column-5">...</div>
<h2>Title</h2>
<div class="column-5">...</div>
<div class="column-5">...</div>
<div class="column-5">...</div>
<div class="column-5">...</div>
<div class="column-5 last-child">...</div>
<div class="column-5">...</div>
<div class="column-5">...</div>
<div class="column-5">...</div>
<div class="column-5">...</div>
<div class="column-5 last-child">...</div>
<div class="column-5">...</div>
<div class="column-5">...</div>

How can I achieve this?

Answer 1

As far as I know this cannot be done with pure CSS because nth-of-type selector will not reset the counter when there is a different element in between. Also note that nth-of-type works primarily on the element type and not on the class selector you have attached to it.

Your current selector ( .column_5:nth-of-type(5n+5) ) would select the 5th element of every type which also happens to have the class='column_5' ). It will work on all types of elements (that is, it will select all among the 5th h2 , 5th div , 5th span as long as they have the required class). There is also a mismatch between the selector and the class in the HTML but I think it is a typo.

Your best bet would be to use JavaScript/jQuery to achieve this and below is a sample method using JavaScript (I assume you are Ok with a JS answer as it is tagged in question).

The code is pretty much self explanatory but I have added some inline comments for better understanding. It applies the class to every 5th element which has the required class (irrespective of the element type).

 window.onload = function() { var j = 0; var els = document.querySelectorAll('body *'); // Selecting all elements under parent but you can replace body with the required parent. for (i = 0; i < els.length; i++) { // loop through all elements if (els[i].className.indexOf('column-5') != -1) { // if element has class j = j + 1; // increment counter if (j % 5 == 0) // if counter = 5 or its multiple els[i].className += ' last-child'; //add class } else { // if element does not have class j = 0; // reset counter. } } } 

 .last-child { background: red; } 

 <h2>Title</h2> <div class="column-5">...</div> <div class="column-5">...</div> <div class="column-5">...</div> <div class="column-5">...</div> <div class="column-5">...</div> <div class="column-5">...</div> <h2>Title</h2> <div class="column-5">...</div> <div class="column-5">...</div> <div class="column-5">...</div> <div class="column-5">...</div> <div class="column-5">...</div> <div class="column-5">...</div> <div class="column-5">...</div> <div class="column-5">...</div> <div class="column-5">...</div> <div class="column-5">...</div> <div class="column-5">...</div> <div class="column-5">...</div> 

---

Response to comment:

1. In your case each section element which has the class also has a child img element and so when we use a selector like #id * (descendant selector), it selects and traverses through all elements that are under the parent (irrespective of whether they are children, grand-children etc). So when the img tag is encountered, the counter j is getting reset. To avoid this, select just the direct children elements by using the below line:

    var els = document.querySelectorAll('.container > *'); 

2. In the fiddle, I have selected the onDomReady option in Frameworks & Extensions (sidebar). In your real code, you could either put this piece of code in a script tag just before the closing body tag ( </body> ) or if it is in a external script file, reference it at the same place (just before </body> ).

Updated Fiddle

Answer 2

Harry's answer is good. I also have an idea where we can still use nth-child concept. Wrap the blocks with another element. Like this:

<div class="blocks">
    <h2>Title</h2>
    <div class="column-5">...</div>
    <div class="column-5">...</div>
    <div class="column-5">...</div>
    <div class="column-5">...</div>
    <div class="column-5">...</div>
    <div class="column-5">...</div>
</div>
<div class="blocks">
    <h2>Title</h2>
    <div class="column-5">...</div>
    <div class="column-5">...</div>
    <div class="column-5">...</div>
    <div class="column-5">...</div>
    <div class="column-5">...</div>
    <div class="column-5">...</div>
    <div class="column-5">...</div>
    <div class="column-5">...</div>
    <div class="column-5">...</div>
    <div class="column-5">...</div>
    <div class="column-5">...</div>
    <div class="column-5">...</div>
    <div class="column-5">...</div>
    <div class="column-5">...</div>
    <div class="column-5">...</div>
    <div class="column-5">...</div>
    <div class="column-5">...</div>
    <div class="column-5">...</div>
</div>

Now you can use like ".blocks .column-5:nth-of-type(5n+5)').addClass('last-child')". Which means the children of .blocks will be counted and 5n+5 will work fine in every block.