Как сформировать nth-child?

Question

[hypero]

Есть вывод такого блока:


Первый блок сначала идет текст, потом картинка, 4 блок сначала картинка, потом текст.
Снизу подгружаются через ajax другие посты.
Собственно вопрос: как сделать чтобы, каждый 4 пост менялся местами - слева картинка, потом текст. Следующий 4 пост наоборот - слева текст, справа картинка.

Answer 1

[Арсений Матыцин]

Не поверишь) Но вот так. Ну и учти, что следующий после каждого четвертого это 8-й. Специфичность стилей тебе в помощь.

Answer 2

[Андрей Федоров]

.item {
  display: flex;
}
.item:nth-child(4n+2),
.item:nth-child(4n+3) {
  flex-direction: column;
}
.item:nth-child(4n) {
  flex-direction: row-reverse;
}

Comments

[hypero]

Получается такая проблема:
Сначала идет нормально: (скриншот 1)


Потом вот так:

Где красным, этот блок должен быть на всю ширину.

[hypero]

hypero, hypero, Доп информация: Сначала на выводе 4 блока, есть кнопка Подгрузить аяксом - выводит аяксом еще 4 блока.

[Андрей Федоров]

hypero, возможно у вас на уровне item есть еще блоки.

[hypero]

Нету. Ссылка на сайт https://www.tsgsteglitz.de/aktuelles/

Смотрим только на контейнер с классами blog-wrap-ajax posts-ajax - то есть там где подгрузка постов.

[Андрей Федоров]

Вот модельный код, все отлично - https://codepen.io/aliencash/pen/dyoxGGL

[Андрей Федоров]

hypero, а говорите нету! Это что?

[hypero]

Андрей Федоров, nth-child задается для селектора .blog-article же

[Андрей Федоров]

hypero, ну я же говорю, если не работает, значит вы где-то ошиблись. Например у вас есть такое правило

.posts-ajax .blog-article:nth-child(4n), .posts-ajax .blog-article:first-child {
  flex-direction: row-reverse;
}

это значит, что первому и четвертому вы задаете одно и тоже направление, а между тем по моему совету у них разные направления.

[hypero]

Андрей Федоров, еще раз если не сложно можете посмотреть, всё получилось, только с отступом проблемы в местах.

[Андрей Федоров]

hypero, так margin'ы раздайте где нужно да и все.

[hypero]

Андрей Федоров, отступы есть, допустим в 9 по списку нету уже.

[Андрей Федоров]

hypero, ну вот откуда такие правила - .posts-ajax .blog-article:nth-child(5n) .blog-info если у вас групировка по 4?

[hypero]

Андрей Федоров, Я пробовал сделать 4n, не срабатывает.

[Андрей Федоров]

hypero, вам нужно просто добавить отступы к моим правилам

.item  .blog-info {
  padding: 0 40px 0 0;
}
.item:nth-child(4n+2) .blog-info,
.item:nth-child(4n+3) .blog-info {
  padding: 40px 0 0 0;
}
.item:nth-child(4n) .blog-info {
  padding: 0 0 0 40px;
}

[hypero]

Андрей Федоров, не работает.

[Андрей Федоров]

hypero, простите, но я дал вам всю информацию, чтобы решить ваш вопрос. дальше - сами.

[hypero]

Андрей Федоров, последний вопрос. Сейчас все посты в одном контейнере. Сделал как вы скзаали:

.item {
  display: flex;
}
.item:nth-child(4n+2),
.item:nth-child(4n+3) {
  flex-direction: column;
}
.item:nth-child(4n) {
  flex-direction: row-reverse;
}

Сейчас пост начинается сначала картинка, потом текст.

Вопрос: как сделать теперь, чтобы начинался сначала текст, потом картинка, при это не словам другие блоки?
Можете наблюдать тут же https://www.tsgsteglitz.de/aktuelles/

[Андрей Федоров]

hypero, flex-direction: row-reverse; - это текст, потом картинка, flex-direction: row; - это кратинка, потом текст.

[hypero]

Андрей Федоров, ну применю я это свойство к первому например, остальные блоки тогда не так отображаться будут.

[Андрей Федоров]

hypero, а это зависит от того как вы сделаете. column перебивает значение, потому на 2 и 3ий блоки это не повлияет. Т.е. вам нужно задать row-reverse по умолчанию, а для каждого 4го - row.

Блин. Разберитесь наконец с flex и css. Это СОВСЕМ не сложно!!!