Selecione elementos X, pule X, selecione elementos X - css

Eu estou fazendo uma visão de grade que se parece com isso: http://i.stack.imgur.com/41xxM.png

Então, nessa foto você vê, é sempre doiscontêineres por linha, mas a direção de flutuação dos elementos internos (imagem / conteúdo) muda por linha, então eu precisava selecionar os itens em uma linha (Variável: X), pular os itens X e selecionar os próximos X itens e assim por diante...

Eu sei que deve ser possível de alguma forma com enésimo: crianças, mas eu simplesmente não conseguia fazê-lo funcionar ... Um recurso útil foi este link que encontrei, mas mesmo com isso, eu não poderia fazê-lo ... http://keithclark.co.uk/articles/targeting-first-and-last-rows-in-css-grid-layouts/

Eu realmente aprecio a sua ajuda! E se você tiver um sass-mixin para isso, seria incrível!

Obrigado!

EDITAR:

Esse é o HTML de um contêiner:

<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:

Aqui está o código gerado do 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>

Respostas:

0 para resposta № 1

Ok, eu fui capaz de escrever um Sass-Mixin que lida com esse comportamento para mim!

@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);
}

}

Como eu usei:

.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;
}
}
}

(O xs (), sm () e md () são mixins de breakpoint que eu defini)

O que faz:

Ele seleciona os primeiros itens X (rowitems), pula uma linha e faz um loop até um determinado número de elementos (totalitems).

A variável totalitems é a única coisa que "snão é perfeito agora, porque eu não sei quantos elementos existem, então eu tenho que dar um valor fixo ... Mas se eu sei que haverá 10 elementos, isso é ótimo!

Recursos:

Eu encontrei este site (http://nthmaster.com), onde há um exemplo do chamado "faixas genéricas de crianças", que se parecem com isso:

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;
}

"Usando este n-filho (n + 4): n-filho (-n + 8) podemos selecionar elementos dentro de certos intervalos, neste caso os elementos 4-8. "(esta é a exemplo do site)

Por que eu usei nth-of-type () e não nth-child ()?

Safari não interpretou o "faixas genéricas para crianças". Então, neste Stackoverflow-Thread (https://stackoverflow.com/a/17312173/3754201) Descobri que ": nth-of-type ()" tem melhor suporte. (Firefox 3.5+, Opera 9.5+, Chrome 2+, Safari 3.1+, IE 9+.)

---