Select X elements, skip X, select X elements - css

Question

I'm making a grid view that looks like this:
http://i.stack.imgur.com/41xxM.png
So in this picture you see, it's always two containers per row, but the float-direction of the inner elements (image/content) changes per row, so I'd need to select the items in one row (Variable: X), skip X items and the select the next X items and so on...
I know it should be possible somehow with nth:children, but I just couldn't get it to work... One helpful ressource was this link I found, but even with this, I couldn't get it done... http://keithclark.co.uk/articles/targeting-first-and-last-rows-in-css-grid-layouts/
I'd really appreciate your help! And if you happen to have a sass-mixin for this, it would be awesome!
Thank you!
EDIT:
That's the HTML of one container:
<article id="post-<?php the_ID(); ?>" <?php post_class('post-object'); ?>>
<div class="post-object-inner">
<div class="object-content">
<a href="<?php echo the_permalink(); ?>">
<div class="half">
<div class="object-content image-part" style="background-image: url(<?php echo $postimage; ?>)"><?php echo $author; ?></div>
</div>
<div class="half">
<div class="object-content content-part">
<span>
<h2><?php echo $author; ?></h2>
<h1><?php echo $trimmed_title; ?></h1>
</span>
</div>
</div>
</a>
</div>
</div>
EDIT 2:
Here's the generated code from the DOM:
<article id="post-28" class="post-object post-28 post type-post status-publish format-standard has-post-thumbnail hentry category-allgemein">
<div class="post-object-inner">
<div class="object-content">
<a href="http://domain.com/die-neue-website-geht-online/">
<div class="half">
<div class="object-content image-part" style="background-image: url(http://domain.com/uploads/2015/07/mittag.jpg)">Lukas Guschlbauer</div>
</div>
<div class="half">
<div class="object-content content-part">
<span>
<h2>Lukas Guschlbauer</h2>
<h1>Die neue Website geht online!</h1>
</span>
</div>
</div>
</a>
</div>
</div>

Answer 1

Okay, I was able to write a Sass-Mixin that handles this behaviour for me!
#mixin nth-rows($rowitems: 3, $totalitems: 10) {
$num: 0;
$totalitems: $totalitems + 1;
#while $num <= $totalitems {
&:nth-of-type(n+#{$num + 1}):nth-of-type(-n+#{$num+$rowitems}) {
#content;
}
$num: $num + ($rowitems*2);
}
}
How I used it:
.post-object {
position: relative;
width: 100%;
float: left;
#include xs() {
#include nth-rows(1,10) {
.half {
float: left;
}
}
}
#include sm($md) {
width: 50%;
#include nth-rows(2,10) {
.half {
float: left;
}
}
}
#include md() {
width: 33.3%;
#include nth-rows(3,10) {
.half {
float: left;
}
}
}
(The xs(), sm() and md() are breakpoint mixins I defined)
What it does:
It selects the first X items (rowitems), skips a row and loops up until a given number of elements (totalitems).
The variable totalitems is the only thing that's not perfect now, because I don't know how many elements there are, so I have to give it a fixed value... But if I know there's gonna be 10 elements, this is great!
Ressources:
I found this website (http://nthmaster.com), where there's an example of so-called "generic child ranges", which look like this:
li:nth-child(n+4):nth-child(-n+8) span {
background-color: #298EB2;
box-shadow: inset -3px -3px 10px rgba(0, 0, 0, 0.4), 0 0 10px black;
}
"Using this nth-child(n+4):nth-child(-n+8) we can select elements
within certain ranges, in this case elements 4-8." (this is the
example from the website)
Why did I use nth-of-type() and not nth-child() ?
Safari didn't interpret the "generic child ranges". So in this Stackoverflow-Thread (https://stackoverflow.com/a/17312173/3754201) I found out that ":nth-of-type()" has better support. (Firefox 3.5+, Opera 9.5+, Chrome 2+, Safari 3.1+, IE 9+.)