Добавьте другое направление изгиба с помощью nth-child()

Question

Я пытаюсь оформить посты по-другому с nth-child()один пост должен иметь одно гибкое направление, а второй другой, но почему-то я не могу добиться того, чего хочу. Это мой css:

.front-page-posts {
    display: flex;
    height: 620px;
    background: black;
}

.fp-image img {
    max-height: 100%;
}
.fp-title {
    margin: auto;
}
.front-page-posts:nth-child(2n+0) {    
    flex-direction: row-reverse;
}

И это целевая разметка из моей темы WP:

<article id="post-34" class="post-34 post type-post status-publish format-standard has-post-thumbnail hentry category-front-page">
   <div class="front-page-posts">
     <div class="fp-title">
         <h1 class="entry-title">Marketeers with a passion for people.</h1>     
     </div>
     <div class="fp-image">
         <img src="two-guys.jpg">       
     </div>
   </div><!-- .entry-header -->
</article>

Итак, как я могу добиться, чтобы одно сообщение с изображением и заголовком переходило в одно направление, а второе - в другое?

Answer 1

На основе комментариев, потому что WordPress повторяет article а не .front-page-posts, это код, который вы должны будете использовать:

article.type-post:nth-child(2n+0) .front-page-posts {
    flex-direction: row-reverse;
}

Ваш HTML-код будет выглядеть примерно так, поэтому вам нужно перебирать CSS статьи, а не .front-page-posts div, который всегда будет nth-first-child.

<div class="wrapper">
    <article id="post-34" class="post-34 post type-post status-publish format-standard has-post-thumbnail hentry category-front-page">
       <div class="front-page-posts">
         <div class="fp-title">
             <h1 class="entry-title">Marketeers with a passion for people.</h1>     
         </div>
         <div class="fp-image">
             <img src="two-guys.jpg">       
         </div>
       </div><!-- .entry-header -->
    </article>
    <article id="post-34" class="post-34 post type-post status-publish format-standard has-post-thumbnail hentry category-front-page">
       <div class="front-page-posts">
         <div class="fp-title">
             <h1 class="entry-title">Marketeers with a passion for people.</h1>     
         </div>
         <div class="fp-image">
             <img src="two-guys.jpg">       
         </div>
       </div><!-- .entry-header -->
    </article>
</div>

Надеюсь, это имеет смысл. Если нет, оставьте комментарий, и я постараюсь уточнить немного больше.