CODEWITHSUNDEEP
wordpresscsscss-selectorsflexbox
Dano007
Dano007

Reputation: 1932

Create a different background colour for each flex box item

My site uses wordpress and toolset, basically, the below code returns a flexbox that has three items within it. Each of those items background colour needs to be different.

I'm unsure on the approach, but research points to something like using, but localizing it to just the flex box, not site wide. Could I request some direction ideas?

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

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

Upvotes: 0

Views: 3073

Answers (1)

Asons
Asons

Reputation: 87221

Based on the assumption that the loop creates 3 <div class="col-md-4 flexbox-equalise"> siblings, you can use the nth-child selector like this:

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

This selector will target any element having the class flexbox-equalise and being sibling nr 1-3

You can narrow this down further by e.g. adding .flexbox-wrap class to the selector, like this:

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

This selector will target any element having the class flexbox-equalise, being a child of flexbox-wrap and sibling nr 1-3.

Stack snippet

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

Upvotes: 1

Related Questions