Answers.Body: <p>When looping through Matrix rows, you can use <a href="http://twig.sensiolabs.org/doc/tags/for.html#the-loop-variable" rel="nofollow">{{ loop.index }} or {{ loop.index0 }}</a> to see which row you're at.</p>
  
  <p>With loop.index, you could create html for each row number, or (for instance) create different html for even/uneven:</p>
  
  <pre><code>{% for row in entry.matrixFieldHandle %}
      {% if loop.index is divisible by(2) %}
          &lt;p class="even"&gt;{{ row.text }}&lt;/p&gt;
      {% else %}
          &lt;p class="uneven"&gt;{{ row.text }}&lt;/p&gt;
      {% endif %}
  {% endfor %}
  </code></pre>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-08-03T17:08:43.593Z
Answers.Text: Twig has tests for [even](http://twig.sensiolabs.org/doc/tests/even.html) and odd, so `{% if loop.index is even %}` will work too.
Answers.UserDisplayName: Marion Newlevant
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-08-03T09:17:24.667Z
Answers.LastActivityDate: 2015-08-03T09:17:24.667Z
Answers.UserDisplayName: Paul
Body: <p>I have a complex html/css structure per 'row' that I would like to use Matrix to populate. Design markup as follows:</p>
  
  <pre><code>&lt;!--- feature left --&gt;
  &lt;section class="features-inner dark-bg-container"&gt;
      &lt;div class="row collapse small-uncollapse" &gt;
          &lt;div class="medium-5 small-12 columns end dark-bg" &gt;
              &lt;h3&gt;Title&lt;/h3&gt;
              &lt;p&gt;Lorem Ipsum...&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="medium-5 medium-push-2 small-12 columns end dark-bg-icon" &gt;
              &lt;img src="img/image.svg" class="feature-image"/&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/section&gt;
  &lt;!--- end of feature left --&gt;
  
  &lt;!--- feature right --&gt;
  &lt;section class="features-inner gold-bg-container"&gt;
      &lt;div class="row collapse small-uncollapse" &gt;
          &lt;div class="medium-5 medium-push-7 small-12 columns gold-bg" &gt;
              &lt;h3&gt;Title&lt;/h3&gt;
              &lt;p&gt;Lorem Ipsum...&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="medium-5 medium-pull-5 small-12 columns end gold-bg-icon"&gt;
              &lt;img src="img/image.svg" class="feature-image"/&gt;
          &lt;/div&gt;  
      &lt;/div&gt;
  &lt;/section&gt;
  &lt;!--- end of feature right --&gt;
  </code></pre>
  
  <p>How would I get Matrix to change the markup per 'row'? I looked at switch but that seems to be for types of block content/types.</p>
  
  <p>TIA.</p>
  
Tags: <matrix>
Title: Change HTML and CSS per Matrix row
ThreadText: # Change HTML and CSS per Matrix row
  
  (Asked by: username_0 on 2015-08-03)
  
  I have a complex html/css structure per 'row' that I would like to use Matrix to populate. Design markup as follows:
  
  ```
  <!--- feature left -->
  <section class="features-inner dark-bg-container">
      <div class="row collapse small-uncollapse" >
          <div class="medium-5 small-12 columns end dark-bg" >
              <h3>Title</h3>
              <p>Lorem Ipsum...</p>
          </div>
          <div class="medium-5 medium-push-2 small-12 columns end dark-bg-icon" >
              <img src="img/image.svg" class="feature-image"/>
          </div>
      </div>
  </section>
  <!--- end of feature left -->
  
  <!--- feature right -->
  <section class="features-inner gold-bg-container">
      <div class="row collapse small-uncollapse" >
          <div class="medium-5 medium-push-7 small-12 columns gold-bg" >
              <h3>Title</h3>
              <p>Lorem Ipsum...</p>
          </div>
          <div class="medium-5 medium-pull-5 small-12 columns end gold-bg-icon">
              <img src="img/image.svg" class="feature-image"/>
          </div>  
      </div>
  </section>
  <!--- end of feature right -->
  
  ```
  
  How would I get Matrix to change the markup per 'row'? I looked at switch but that seems to be for types of block content/types.
  
  TIA.
  
  **Tags:** matrix
  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_1 on 2015-08-03. Score: 3 | Accepted answer
  
  When looping through Matrix rows, you can use [{{ loop.index }} or {{ loop.index0 }}](http://twig.sensiolabs.org/doc/tags/for.html#the-loop-variable) to see which row you're at.
  
  With loop.index, you could create html for each row number, or (for instance) create different html for even/uneven:
  
  ```
  {% for row in entry.matrixFieldHandle %}
      {% if loop.index is divisible by(2) %}
          <p class="even">{{ row.text }}</p>
      {% else %}
          <p class="uneven">{{ row.text }}</p>
      {% endif %}
  {% endfor %}
  
  ```
  
  > **Comments:**
  > **username_2**: Twig has tests for [even](http://twig.sensiolabs.org/doc/tests/even.html) and odd, so `{% if loop.index is even %}` will work too.  
  
  ---
  
  