"Optimizing XSL stylesheets by implementing conditional row styles to prevent redundant

Is there a way to display rows that are older than 2 years from today in bold without repeating the code?
I know the condition I need, but I'm struggling with avoiding duplicating all the code just for a different style.

This is the code I have:

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"
      xmlns:xsl="http://www.x.org/1999/XSL/Transform">
<xsl:key name="albums-by-country" match="Album" use="Country" />
<xsl:template match="Albums">
 <html>
 <head>
<style>
h4 { 
    text-decoration: underline;
    font-weight: bold;

}
</style>
</head>
  <body>
    <xsl:for-each select="Album[count(. | key('albums-by-country', Country)[1]) = 1]">
        <xsl:sort select="Country" />
        <h4 style="color:green;"><xsl:value-of select="Country" style="color:red;" /><br /></h4>


                  <table border="1">
    <tr bgcolor="#979994">
      <th style="text-align:left">Price</th>
      <th style="text-align:left">Link</th>
      <th style="text-align:left">Company</th>
      <th style="text-align:left">Name</th>
      <th style="text-align:left">Date</th>
      <th style="text-align:left">Artist</th>
    </tr>
    <xsl:for-each select="key('albums-by-country', Country)"> 
<xsl:sort select="Date" />
   <tr>
      <td><xsl:value-of select="Price"/></td>
      <td><xsl:value-of select="Link"/></td>
      <td><xsl:value-of select="Company"/></td>
      <td><xsl:value-of select="Name"/></td>

  <xsl:choose>
      <xsl:when test="string-length(Date)>4">
      <td><xsl:value-of select="concat(substring(Date,5,2),'/',substring(Date,7,8),'/',substring(Date,1,4))"/></td>
</xsl:when>
<xsl:otherwise>
 <td><xsl:value-of select="concat('01/01/',substring(Date,1,4))"/></td>
</xsl:otherwise>
</xsl:choose>
      <td style="color:red;"><xsl:value-of select="Artist"/></td>
    </tr>
    </xsl:for-each>
      <tr>
                <td colspan="2">Total Amount</td>
                <td bgcolor="#ffff00"><xsl:value-of select="sum(key('albums-by-country', Country)/Price)"/></td>
            </tr>
  </table>
   <html>
  <body>
</xsl:template>      
</xsl:stylesheet>

Answer №1

Your approach of bolding by applying style to tr or td elements seems unnecessary. You can simply use the attribute function within the if conditional.

 <tr>  <!-- or td -->
    <xsl:if test="{Older than 2 years}">
      <xsl:attribute name="style">bold whatever</attribute>
    </if>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Room available on the body's right side for tiny gadgets

I'm currently facing a website issue while using Bootstrap. Everything seems to be working fine until I attempt to check the responsiveness of my website. There appears to be an excessive white space on the right side of my body, but only in a specifi ...

Is there a way to point my Github URL to the index file within a specific folder?

The actual working location of my website: My desired working location for the site: Originally, I had my index.html file in the main repository, but later moved it to an html folder along with other html files for better organization. How can I ensure t ...

The two divs are positioned on top of one another, with the link in the bottom div being unclickable

I am trying to create a unique effect where a tile divides into two on hover, with each tile acting as an individual link. Additionally, I want the background color of the tiles to change on hover. To achieve this, I have stacked two divs (toptile and bot ...

Aligning text in a vertical progress bar using absolute positioning

Currently, I am trying to create a health bar-like element but I am facing difficulties in centering the text within it. Despite exhausting all my options, the text is either off-center when its length changes or extends beyond the borders of the bar. Her ...

What could be causing the absence of the box within the div element?

I am still learning the ropes of javascript, CSS, HTML and programming in general. Despite being a beginner, I have managed to grasp the basics of simple HTML and CSS. I had successfully created a nested div structure before, but suddenly the inner div is ...

Issue with bottom margin on the last flex item located at the end of the container is not being applied

My button is currently touching the end of the container, but I want to create some space between them. However, adding a margin bottom to the button does not seem to be working as expected. Below is the CSS and HTML code: .events{ height: 100%; d ...

Having trouble implementing custom fonts in React App for all browsers

While working on my project, I included custom .woff fonts using @font-face and stored them in my src folder. Surprisingly, the fonts displayed correctly when running the app locally. However, upon deploying the app to the live domain, Chrome and Firefox ...

What is the best way to rearrange images within a grid container?

I apologize for asking numerous questions, but could someone please guide me on how to position an image slightly to the right of center or just 1 inch to the left of center? http://jsfiddle.net/96d7udd7/ Below is the HTML code snippet: <figure class ...

Automatically insert personalized CSS design markers into Material-UI elements using code

Within my react-redux app, I am utilizing material-ui components. The initial UI prototype was established using adobe-xd, which has the capability to export character styles (design tokens) in a CSS file format: :root { /* Colors: */ --text-color: #F8E29 ...

Is it possible to combine numerous -webkit-transition animations in my css code without using keyframes?

I'm experimenting with chaining multiple -webkit-transition animations in my CSS without using keyframes. I understand it's possible to achieve this by calling a keyframe animation, but I prefer to simply overwrite the properties. However, for s ...

Encountering a Blank Area at the Top of a Printed AngularJS Screen

Currently, I am tackling an issue in AngularJS while working on the Print Invoice Page. The problem I am encountering is a blank space at the top of the printed screen. Check out the image here Below is my code: HTML <div id="invoice" class="compact ...

Use CSS to manipulate the dimensions of an overlay

Looking for a way to ensure that the height of your overlay matches the height of your carousel, even on smaller screen sizes? The HTML code below demonstrates how to combine simple HTML with a Bootstrap carousel featuring three images, along with an overl ...

Are you looking for a demonstration of "Creative Loading Effects" that triggers when the page is loaded?

I came across this demo for a preloader on my website called Creative Loading Effects, specifically the "3D Bar Bottom" effect, which I find very exciting. However, I noticed that it only loads when we press the button, and not automatically when the page ...

Trouble expanding Bootstrap Dropdown menu on mobile devices

I am currently facing an issue with a Bootstrap navbar that includes a dropdown menu for selecting courses. On my desktop, everything works perfectly fine when I click on the courses tab. However, when I try to select a course on mobile, nothing happens. ...

"Achieving Alignment: Placing a Div Element Inside an H

I am in the process of building a portfolio for freecodecamp, but I am having trouble with centering the button and row div on the page. The row div is necessary because I will be adding more buttons later on, but for now I just need the FCC button. Below ...

Angular CSS: ng-style applied to only one side, the other remains unaffected

I am working on an Angular application that requires a split screen with two halves, each displaying the same array values. The width and height values are set using a service and accessed by a controller. The style is applied using ng-style in the DOM. Ho ...

Elements are randomly glitching out with CSS transitions in Firefox

Chrome is working perfectly for me, but when I switch to Firefox it behaves differently than expected I am attempting to create a simple animation (utilizing transitions) that continuously runs on mouseover and smoothly returns to the starting position on ...

Safari iOS does not display any background for Buttons

Encountering an unusual problem with buttons on iOS devices specifically in Safari browser - the background color isn't being applied like it is on Desktop and Android devices. Here are the CSS properties for the button: export const Button = styled.b ...

The container's :before pseudo-element features a sleek white border

I have been experimenting with using the :before and :after pseudo-elements to generate diagonal lines within a container. However, I am encountering an issue where these pseudo-elements appear to have a white bottom border, and I am unable to determine t ...

Code Snippet: Adjust Table Column Alignment using CSS

Apologies for the basic question, as I am new to CSS. Below is the UI that I am working with: https://i.stack.imgur.com/crAYE.png Here is the code that corresponds to the UI: <div class="row centered-form center-block"> <div cla ...