Select X elements, skip X, select X elements

Question

I'm making a grid view that looks like this: https://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>

The generated code doesn't change anything of the HTML Structure, but okay, I'll edit it again! — der-lukas, Jul 01 '15 at 10:21
To be honest, putting the change of the side in the client-side is not a smart decision based on performance bla bla. Why don't you just change the order of the two `half` every X number of articles in php? — Joel Almeida, Jul 01 '15 at 10:25
Because the layout is responsive and will break from for example three containers in a row, to two in a row, so I can only control it by CSS... — der-lukas, Jul 01 '15 at 10:27
@Vucko No, on big screens there are 3, tablet 2 and mobile one. But to clear this up: 1 element = text + image. So in the image posted in my question you see two rows with each 2 elements. — der-lukas, Jul 01 '15 at 11:06
@der-lukas if there is a parent element for every `row`, you can do something like this - [jsfiddle](http://jsfiddle.net/xn9645w8/) — Vucko, Jul 01 '15 at 11:21
@Vucko Looks good in the preview, but as I saw you achieve this by hiding elements? — der-lukas, Jul 01 '15 at 11:36
@der-lukas yes, I used `media querys` to hide elements - for `<768px` I hide the **first two** `items`, for `<992px` I hide the **first** `item` and for `992px<` I show them all - just like you said: "_No, on big screens there are 3, tablet 2 and mobile one._" — Vucko, Jul 01 '15 at 11:42
Ah, I got it myself, and the way I do it is actually pretty nice - I think... I'm gonna write it down in an answer! — der-lukas, Jul 01 '15 at 12:54

score 0 · Answer 1 · edited May 23 '17 at 11:51

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+.)

Select X elements, skip X, select X elements

1 Answers1