Home/ Questions/Q 8509769
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T03:31:29+00:00

<html xmlns=http://www.w3c.org/1999/xhtml> <head> <title>Opera test – css inheritance</title> <style type=text/css> /* theirs */ .theirs

  • 0
<html xmlns="http://www.w3c.org/1999/xhtml">
<head>
<title>Opera test - css inheritance</title>
<style type="text/css">
/* theirs */
.theirs {
    background: #FF0000 url("http://www.wonderbackgrounds.com/glitter/backgrounds/glitter_background_b7.gif") repeat 0% 0%;
}
/* mine */
.mine {
    background-image: none;
    background: #FFC0C0;
}
</style>
</head>
<body>
<table border="1">
  <thead class="theirs">
    <tr class="theirs mine">
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tfoot class="">
    <tr class="theirs mine">
      <td>Sum</td>
      <td>$180</td>
    </tr>
  </tfoot>
  <tbody class="theirs">
    <tr class="theirs mine">
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr class="theirs mine">
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
</table>
</body>

</html>

I was trying to overwrite the background color of a TR, the code worked as expected on Chrome but not on Opera which is our target browser.

The question is, how do I write code in the “mine” class for css to get rid of the background-image. It works in Chrome and shows pink cells in all, but in Opera it shows the background image.

I can’t change the other css, I want to clear the url but opera doesn’t want to when tbody contains the same class. I took the class out of tfoot to show that it works in that case but not when class is defined in the surronding tags of .

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Looking at the code, I see that you’ve left both classes attached to the TRs. Since they’re 2 conflicting styles, you’re relying on the order of application to get the effect you’re after.
    Chrome it seems, applies the styles in the same order that the selectors are applied to the element. I.e class=’their mine’ causes Chrome to apply their CSS then to overwrite it with yours.

    Just this past week I was reading that it’s not actually a part of the spec – the order in which styles are applied is entirely arbitrary an up to browser vendors.

    With that in mind, you should simply change your css so that the class ‘mine’ has the same attributes as the class ‘theirs’ – albeit with the required changes.

    Then, you can just give your TRs a class of either ‘theirs’ or ‘mine’.

    Expanding on the comment I left below, you could use the following html (taken from example page in your link)

    <html xmlns="http://www.w3c.org/1999/xhtml">
<head>
<title>Opera test - css inheritance</title>
<style type="text/css">
/* theirs */
.theirs {
    background: #FF0000 url("http://www.wonderbackgrounds.com/glitter/backgrounds/glitter_background_b7.gif") repeat 0% 0%;
}
/* mine */
.mTable .theirs {
    background-image: none;
    background-color: #FFC0C0;
}
</style>
</head>
<body>
<table class='mTable' border="1">
  <thead class="theirs">
    <tr class="theirs">
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tfoot class="">
    <tr class="theirs">
      <td>Sum</td>
      <td>$180</td>
    </tr>
  </tfoot>
  <tbody class="theirs">
    <tr class="theirs">
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr class="theirs">
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
</table>
</body>

</html>
    • 0