How do I override the style background color?

user_13923861 0
Viewed 51

I was doing this xsl file and was trying to create a weather where the top header need to have a different color than the background color but the style color keeps overriding the given color instead. Is there a way to rectify this issue?

<style> <!--background color of blue and green-->

        tbody>tr:nth-child(odd){
        background-color: blue; }
        
        tbody>tr:nth-child(even){
        background-color: green; }
        </style>
  </head>
  <body>
    <h1> <xsl:value-of select="@qLocation"/> 
          [<xsl:value-of select="@qTime"/>] </h1>


    <table border="1" style="border:1px solid black;">
        <tr >  
            <th style="background-color:orange">Date</th> <!--this color should appear as orange but is overridden by the style-->
            <th>Weather data</th>
            <th>Highest</th>
            <th>Lowest</th>
        </tr>
css xml html
1 Answers

Your problem was referring to th tags in the css. You specified like this:

tbody>tr:nth-child

And it was necessary like this:

tbody>tr th:nth-child

The tbody tag was also missing in your html structure.

tbody>tr th:nth-child(odd){
        background-color: blue; }
        
tbody>tr th:nth-child(even){
        background-color: green; }
<table border="1" style="border:1px solid black;">
    <tbody>
        <tr>  
            <th style="background-color: orange">Date</th>
            <th>Weather data</th>
            <th>Highest</th>
            <th>Lowest</th>
        </tr>
     </tbody>
</table>

user_135734440
Related