Applying :nth-child to elements regardless of their different parents

Question

I'm looking for a way to apply the :nth-child approach to elements that are spread over different parents / containers (but it seems to count back from 0 with every container):

<div class="downloads">
    <div class="views-field views-field-view">
        <span class="field-content">
            <div class="view">
                <div class="view-content">
                    <div class="col col-xs-3">text</div> <!-- 1 -->
                    <div class="col col-xs-3">text</div> <!-- 2 -->
                    <div class="col col-xs-3">text</div> <!-- 3 -->
                </div>
            </div>
        </span>
    </div>
    <div class="views-field views-field-view-1">
        <span class="field-content">
            <div class="view">
                <div class="view-content">
                    <div class="col col-xs-3">text</div> <!-- 4: should have a background-color (but nth:-approach counts this back as 1) -->
                    <div class="col col-xs-3">text</div> <!-- 5 -->
                    <div class="col col-xs-3">text</div> <!-- 6 -->
                    <div class="col col-xs-3">text</div> <!-- 7 -->
                    <div class="col col-xs-3">text</div> <!-- 8: should have a background-color -->
                    <div class="col col-xs-3">text</div> <!-- 9 -->
                </div>
            </div>
        </span>
    </div>
</div>

I fiddled a bit around, and the strange thing is: it works with :nth-child(3n+3), but i need every fourth element to be affected, and that's where it goes wrong. When I use :nth-child(4n+4) it would only apply it to one element of the nine that are displayed:

.downloads .col:nth-child(4n+4) {
    background: yellow;
}

Can someone help me out with this please? http://jsfiddle.net/6dkos5fy/1/

jQuery approach works for me. Thanks Alex!

var i = 1;
$(".downloads .col").each(function() {
  if (i % 4 === 0) {
    $(this).addClass("active");
  }
  i++;
});

.active {
   background: yellow;
 }

Answer 1

Is kind hard with you html structure. I create the following using .views-field-view-1 element to separate the containers. :nth-child is not working the way you looking:

The :nth-child(an+b) CSS pseudo-class matches an element that has an+b-1 siblings before it in the document tree, for a given positive or zero value for n, and has a parent element. More simply stated, the selector matches a number of child elements whose numeric position in the series of children matches the pattern an+b.

.downloads .views-field-view-1 .col:nth-child(4n+1) {
  background: yellow;
}

<div class="downloads">
  <div class="views-field views-field-view">
    <span class="field-content">
			<div class="view">
				<div class="view-content">
					<div class="col col-xs-3">text</div> <!-- 1 -->
					<div class="col col-xs-3">text</div> <!-- 2 -->
					<div class="col col-xs-3">text</div> <!-- 3 -->
				</div>
			</div>
		</span>
  </div>
  <div class="views-field views-field-view-1">
    <span class="field-content">
			<div class="view">
				<div class="view-content">
					<div class="col col-xs-3">text</div> <!-- 4: should have a background-color (but nth:-approach counts this as 1) -->
					<div class="col col-xs-3">text</div> <!-- 5 -->
					<div class="col col-xs-3">text</div> <!-- 6 -->
					<div class="col col-xs-3">text</div> <!-- 7 -->
					<div class="col col-xs-3">text</div> <!-- 8: should have a background-color -->
					<div class="col col-xs-3">text</div> <!-- 9 -->
				</div>
			</div>
		</span>
  </div>
</div>

For a better understanding check the following snippet:

.downloads .views-field-view-1 .col:nth-child(4n+1) {
  background: yellow;
}
.downloads .col {
  counter-increment: box;
}
.downloads .col:after {
  content: counter(box);
}

<div class="downloads">
  <div class="views-field views-field-view">	<span class="field-content">
			<div class="view">
				<div class="view-content">
					<div class="col col-xs-3">text</div> <!-- 1 -->
					<div class="col col-xs-3">text</div> <!-- 2 -->
					<div class="col col-xs-3">text</div> <!-- 3 -->
				</div>
			</div>
		</span>

  </div>
  <div class="views-field views-field-view-1">	<span class="field-content">
			<div class="view">
				<div class="view-content">
					<div class="col col-xs-3">text</div> <!-- 4: should have a background-color (but nth:-approach counts this as 1) -->
					<div class="col col-xs-3">text</div> <!-- 5 -->
					<div class="col col-xs-3">text</div> <!-- 6 -->
					<div class="col col-xs-3">text</div> <!-- 7 -->
					<div class="col col-xs-3">text</div> <!-- 8: should have a background-color -->
					<div class="col col-xs-3">text</div> <!-- 9 -->
				</div>
			</div>
		</span>

  </div>
</div>

After your comment with jquery you can try:

var i = 1;
$(".downloads .col").each(function() {
  if (i % 4 === 0) {
    $(this).addClass("active");
  }
  i++;
});

 .active {
   background: yellow;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="downloads">
  <div class="views-field views-field-view">	<span class="field-content">
			<div class="view">
				<div class="view-content">
					<div class="col col-xs-3">text</div> <!-- 1 -->
					<div class="col col-xs-3">text</div> <!-- 2 -->
					<div class="col col-xs-3">text</div> <!-- 3 -->
				</div>
			</div>
		</span>

  </div>
  <div class="views-field views-field-view-1">	<span class="field-content">
			<div class="view">
				<div class="view-content">
					<div class="col col-xs-3">text</div> <!-- 4: should have a background-color (but nth:-approach counts this as 1) -->
					<div class="col col-xs-3">text</div> <!-- 5 -->
					<div class="col col-xs-3">text</div> <!-- 6 -->
					<div class="col col-xs-3">text</div> <!-- 7 -->
					<div class="col col-xs-3">text</div> <!-- 8: should have a background-color -->
					<div class="col col-xs-3">text</div> <!-- 9 -->
				</div>
			</div>
		</span>

  </div>
</div>

References

:nth-child