Alternate List Row Color in WebPart Content Query

Question

XSL File : Created Custom Template Style

 <xsl:template name="Custom" match="Row[@Style='Custom']" mode="itemstyle">
        <xsl:variable name="SafeLinkUrl">
            <xsl:call-template name="OuterTemplate.GetSafeLink">
                <xsl:with-param name="UrlColumnName" select="'LinkUrl'"/>
            </xsl:call-template>
        </xsl:variable>
        <xsl:variable name="DisplayTitle">
            <xsl:call-template name="OuterTemplate.GetTitle">
                <xsl:with-param name="Title" select="@Title"/>
                <xsl:with-param name="UrlColumnName" select="'LinkUrl'"/>
            </xsl:call-template>
        </xsl:variable>
      <div class="mydiv">
        <xsl:call-template name="OuterTemplate.CallPresenceStatusIconTemplate"/>
        <a href="{$SafeLinkUrl}" title="{@LinkToolTip}">
          <xsl:if test="$ItemsHaveStreams = 'True'">
            <xsl:attribute name="onclick">
              <xsl:value-of select="@OnClickForWebRendering"/>
            </xsl:attribute>
          </xsl:if>
          <xsl:if test="$ItemsHaveStreams != 'True' and @OpenInNewWindow = 'True'">
            <xsl:attribute name="onclick">
              <xsl:value-of disable-output-escaping="yes" select="$OnClickTargetAttribute"/>
            </xsl:attribute>
          </xsl:if>
          <xsl:value-of select="$DisplayTitle"/>
        </a>
      </div>
      </xsl:template>

I have a aspx page which has list which is added using WebPart Content Query, and the list row should have alternate Color..

I have tried:

<style>
      div.mydiv li:nth-child(odd){background-color:aqua;}
      div.mydiv li:nth-child(even){background-color:blue;}
      </style>

But, its not working. Thanks in advance..

Answer 1

Add this

<xsl:variable name="Rows" select="/dsQueryResponse/Rows/Row" />
<xsl:variable name="RowCount" select="count($Rows)" />
<xsl:variable name="IsEmpty" select="$RowCount = 0" />

<xsl:for-each select="$Rows">
<xsl:if test="position() mod 2 = 1">
<div style="" class="Odd" > 
<DO SOMETHING>
</div>
</xsl:if>
<xsl:if test="position() mod 2 = 0">
<div style="" class="Even" > 
<DO SOMETHING>
</div>
</xsl:if>
</xsl:for-each>

Add this two new classes Odd and Even to class="item link-item"