フレックスボックスアイテムごとに異なる背景色を作成する

Question

私のサイトでは、wordpressとtoolsetを使用していますが、基本的に以下のコードでは3つのアイテムがあるフレックスボックスが返されます。これらの項目の背景色はそれぞれ異なる必要があります。

私はアプローチが不明ですが、リサーチでは使用方法がわかりますが、サイト全体ではなくフレックスボックスに限定してローカライズしています。私はいくつかの方向のアイデアを要求できますか？

div:nth-child(1) { 
    background: gray; 
} 
div:nth-child(2) { 
    background: red; 
} 
div:nth-child(3) { 
    background: cyan; 
} 

CODE BLOCKは

[wpv-layout-start] 
    [wpv-items-found] 
<div class="row flexbox-wrap"> 
    <!-- wpv-loop-start --> 
    <wpv-loop> 
     <div class="col-md-4 flexbox-equalise"> 
     <article class="well well-equal"> 
      <h4>[wpv-post-title]</h4> 
      <p>[wpv-post-excerpt output="raw"]</p> 
      <p class="lead">[wpv-woo-product-price]</p> 
      <div class="well-actions"> 
      [wpv-woo-buy-or-select add_to_cart_text="Join now!" class="btn-block"] 
      </div> 
     </article> 
     </div> 
    </wpv-loop> 
    <!-- wpv-loop-end --> 
</div> 
    [/wpv-items-found] 
    [wpv-no-items-found] 
     <strong>[wpml-string context="wpv-views"]No items found[/wpml-string]</strong> 
    [/wpv-no-items-found] 
[wpv-layout-end] 

CSS

ループは3人の <div class="col-md-4 flexbox-equalise">兄弟を作成するという仮定に基づいて

.flexbox-equalise .well { position: relative; padding-bottom: 76px; } 
.flexbox-equalise .well .well-actions { position: absolute; bottom: 0; left: 0; right: 0; padding: 16px; } 

Answer 1

、あなたはこのようにnth-childセレクタを使用することができます。

.flexbox-equalise:nth-child(1) { background: red; } 
.flexbox-equalise:nth-child(2) { background: yellow; } 
.flexbox-equalise:nth-child(3) { background: green; } 

このセレクタは、任意の要素がクラスflexbox-equaliseを有し、NR 1-3

兄弟される標的とするあなたは、例えばすることによってこれをさらに絞り込むことができこのように、セレクタに.flexbox-wrapクラスの追加：

.flexbox-wrap > .flexbox-equalise:nth-child(n) { ... } 

このセレクタ1-3 NR flexbox-wrapの子および兄弟である、クラスflexbox-equaliseを有する任意の要素を標的とします。

スタックは、それが自分のためにこれをコーディングするためにあなたは、少なくとも試みていることが予想される

.flexbox-equalise:nth-child(1) { 
 
    background: red; 
 
} 
 

 
.flexbox-equalise:nth-child(2) { 
 
    background: yellow; 
 
} 
 

 
.flexbox-equalise:nth-child(3) { 
 
    background: green; 
 
}

<div class="row flexbox-wrap"> 
 
    <div class="col-md-4 flexbox-equalise"> 
 
    <article class="well well-equal"> 
 
     <h4>[wpv-post-title]</h4> 
 
     <p>[wpv-post-excerpt output="raw"]</p> 
 
     <p class="lead">[wpv-woo-product-price]</p> 
 
     <div class="well-actions"> 
 
     "Join now!" 
 
     </div> 
 
    </article> 
 
    </div> 
 
    <div class="col-md-4 flexbox-equalise"> 
 
    <article class="well well-equal"> 
 
     <h4>[wpv-post-title]</h4> 
 
     <p>[wpv-post-excerpt output="raw"]</p> 
 
     <p class="lead">[wpv-woo-product-price]</p> 
 
     <div class="well-actions"> 
 
     "Join now!" 
 
     </div> 
 
    </article> 
 
    </div> 
 
    <div class="col-md-4 flexbox-equalise"> 
 
    <article class="well well-equal"> 
 
     <h4>[wpv-post-title]</h4> 
 
     <p>[wpv-post-excerpt output="raw"]</p> 
 
     <p class="lead">[wpv-woo-product-price]</p> 
 
     <div class="well-actions"> 
 
     "Join now!" 
 
     </div> 
 
    </article> 
 
    </div> 
 
</div>