Change style for even and odd : choose « XSLT stylesheet « XML Tutorial






File: Data.xml
<?xml version="1.0"?>
<!-- albums.xml -->
<list xml:lang="en">
  <title>title 1</title>
  <listitem>item 1</listitem>
  <listitem>item 2</listitem>
  <listitem>item 3</listitem>
  <listitem xml:lang="sw">item 4</listitem>
  <listitem xml:lang="en-gb">item 5</listitem>
  <listitem xml:lang="zu">item 6</listitem>
  <listitem xml:lang="jz">item 7</listitem>
</list>


File: Transform.xslt

<?xml version="1.0"?>
<!-- comment.xsl -->
<xsl:stylesheet version="1.0" 
  xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

  <xsl:output method="html"/>

  <xsl:template match="/">
    <html>
      <head>
        <title>XSLT and CSS Demo</title>
        <style>
          <xsl:comment> 
            p.big   {font-size: 125%; font-weight: bold;} 
            p.odd   {color: purple; font-weight: bold;}
            p.even  {color: blue; font-style: italic; font-weight: bold;}
          </xsl:comment>
        </style>
      </head>
      <body style="font-family: sans-serif;">
        <xsl:apply-templates select="list/title"/>
        <xsl:apply-templates select="list/listitem"/>
      </body>
    </html>
  </xsl:template>

  <xsl:template match="title">
    <p class="big"><xsl:value-of select="."/></p>
  </xsl:template>

  <xsl:template match="listitem">
    <xsl:choose>
      <xsl:when test="position() mod 2">
        <p class="odd"><xsl:value-of select="."/></p>
      </xsl:when>
      <xsl:otherwise>
        <p class="even"><xsl:value-of select="."/></p>
      </xsl:otherwise>
    </xsl:choose>
  </xsl:template>
  
</xsl:stylesheet>

Output:

<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <title>XSLT and CSS Demo</title><style>
         <!-- 
            p.big   {font-size: 125%; font-weight: bold;} 
            p.odd   {color: purple; font-weight: bold;}
            p.even  {color: blue; font-style: italic; font-weight: bold;}
          --></style></head>
   <body style="font-family: sans-serif;">
      <p class="big">title 1</p>
      <p class="odd">item 1</p>
      <p class="even">item 2</p>
      <p class="odd">item 3</p>
      <p class="even">item 4</p>
      <p class="odd">item 5</p>
      <p class="even">item 6</p>
      <p class="odd">item 7</p>
   </body>
</html>








5.43.choose
5.43.1.choose statement
5.43.2.xsl:choose, xsl:when and xsl:otherwise
5.43.3.xsl:choose: check the value of an attribute
5.43.4.choose with otherwise statement
5.43.5.when test="position() mod 4 = 0"
5.43.6.Change style for even and odd
5.43.7.xsl:choose element is used for selection between several possibilities