Wybierz elementy X, pomiń X, wybierz elementy X - css

Tworzę widok siatki, który wygląda tak: http://i.stack.imgur.com/41xxM.png

Na tym zdjęciu widać, że zawsze są dwakontenery na wiersz, ale kierunek ruchu elementów wewnętrznych (obrazu / treści) zmienia się w każdym wierszu, więc muszę wybrać elementy w jednym wierszu (Zmienna: X), pominąć elementy X i wybrać następne X i tak dalej...

Wiem, że powinno być to możliwe dzięki nth: dzieci, ale po prostu nie mogłem go uruchomić ... Jednym z przydatnych zasobów był ten link, który znalazłem, ale nawet z tym nie mogłem tego zrobić ... http://keithclark.co.uk/articles/targeting-first-and-last-rows-in-css-grid-layouts/

Naprawdę doceniam twoją pomoc! A jeśli zdarzy ci się mieć sass-mixin do tego, byłoby wspaniale!

Dziękuję Ci!

EDYTOWAĆ:

To jest HTML jednego kontenera:

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

EDYCJA 2:

Oto wygenerowany kod z 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>

Odpowiedzi:

0 dla odpowiedzi № 1

Dobrze, udało mi się napisać Sass-Mixin, który obsługuje to zachowanie dla mnie!

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

}

Jak go użyłem:

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

(Xs (), sm () i md () są miksami punktów przerwania, które zdefiniowałem)

Co to robi:

Wybiera pierwsze elementy X (rowitems), pomija wiersz i wykonuje pętle do określonej liczby elementów (totalitems).

Zmienna totalitems jest jedyną rzeczą, która jestteraz nie jest idealny, bo nie wiem, ile jest elementów, więc muszę nadać mu stałą wartość ... Ale jeśli wiem, że będzie 10 elementów, to świetnie!

Zasoby:

Znalazłem tę stronę (http://nthmaster.com), gdzie jest przykład tzw.ogólne zakresy dziecięce„, które wyglądają tak:

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

„Używając tego nth-child (n + 4): nth-child (-n + 8) możemy wybrać elementy w pewnych zakresach, w tym przypadku elementów 4-8. ”(jest to przykład ze strony internetowej)

Dlaczego użyłem nth-of-type (), a nie nth-child ()?

Safari nie zinterpretowało „ogólne zakresy podrzędne”. W tym wątku Stackoverflow (https://stackoverflow.com/a/17312173/3754201) Dowiedziałem się, że „: nth-of-type ()” ma lepsze wsparcie. (Firefox 3.5+, Opera 9.5+, Chrome 2+, Safari 3.1+, IE 9+.)

---