Apply a CSS class to every alternative div using Sitecore SXA

Question

I need to create an SXA component in which I need to apply a specific CSS class to each alternative div.

The component should read the item from a multi-list and then render the HTML and apply a reverse CSS class to each alternative div.

 <div class="landing-feature-card reverse">

I have currently used SXA Scriban to do it but there is a lot of duplicate code. Is there a more efficient way to implement this

{{x=1}}

{{ for i_child in (sc_followmany i_item "Landing Feature Content") }}

{{-  if x%2 == 0 -}}
 <div class="landing-feature-card reverse">
  <div class="inner-wrapper">
    <div class="landing-feature__image">
     {{ i_child.Image}}
   </div>
   <div class="landing-feature__text">
      <p class="landing-feature__label">  {{ i_child.Featured}}</p>
      <h3 class="landing-feature__title">{{ i_child.Title}}</h3>
      <div class="landing-feature__description">
           {{ i_child.Description}}
      </div>
      <div class="landing-feature__cta">
          <a class="link" href="{{ sc_link i_child }}">{{ i_child.CTA }}</a>
      </div>
    </div>
  </div>
</div>
{{  else -}}
<div class="landing-feature-card">
  <div class="inner-wrapper">
    <div class="landing-feature__image">
     {{ i_child.Image}}
   </div>
   <div class="landing-feature__text">
      <p class="landing-feature__label">  {{ i_child.Featured}}</p>
      <h3 class="landing-feature__title">{{ i_child.Title}}</h3>
      <div class="landing-feature__description">
          {{ i_child.Description}}
      </div>
      <div class="landing-feature__cta">
           <a class="link" href="{{ sc_link i_child }}">{{ i_child.CTA }}</a>
      </div>
    </div>
  </div>
</div>
{{  end -}}

{{x=x+1}}

{{ end }}

Answer 1

This is not an SXA or Scriban problem, this is a CSS problem. You can use the :nth-child() psuedo-selector to apply a style.

For example, if you want all even-numbered divs to have your .reversed css applied, then instead of having:

.landing-feature-card.reverse {
   /* some styles here */
}

you could use:

.landing-feature-card:nth-child(even) {
    /* some styles here */
}

If you wanted odd-numbered rows, use nth-child(odd), you can even put a formula in there, for example, if you wanted every 3rd row styled, use nth-child(3n+0), if you want every 3rd row but starting with the first row, nth-child(3n+1). You have a lot of options with just CSS.

Now your Scriban just becomes a simple loop:

{{ for i_child in (sc_followmany i_item "Landing Feature Content") }}
<div class="landing-feature-card">
  <div class="inner-wrapper">
    <div class="landing-feature__image">
     {{ i_child.Image}}
    </div>
    <div class="landing-feature__text">
      <p class="landing-feature__label">  {{ i_child.Featured}}</p>
       <h3 class="landing-feature__title">{{ i_child.Title}}</h3>
       <div class="landing-feature__description">
         {{ i_child.Description}}
       </div>
       <div class="landing-feature__cta">
         <a class="link" href="{{ sc_link i_child }}">{{ i_child.CTA }}</a>
       </div>
    </div>
  </div>
</div>
{{ end }}

no need for complex logic, just let CSS handle it all.