CODEWITHSUNDEEP
cssbackground-color
AJP
AJP

Reputation: 28483

Always cascade CSS background-color

Can't get the background color to always cascade: http://jsfiddle.net/yHgTt/

<html>
  <head>
    <style>
      td { background-color: blue; } 
    </style>
  </head>
  <body>
    <div style="background-color: yellow">
      yellow
      <span>
        and yellow too
      </span>
    </div>
    <span style="background-color: yellow !important ">
      yellow
      <div>
        not yellow but expecting to be
      </div>
    </span>
    <table>
      <thead>
      </thead>
      <tbody>
        <tr style="background-color: yellow !important">
          <td>
            expecting to be yellow
          </td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Edit

Use case is highlighting parts of a third party site using a chrome extension. Whilst I can manipulate the html I do not want to do this at all so that the highlighting/annotating is as easy and error free as possible.

Upvotes: 1

Views: 2665

Answers (3)

j__m
j__m

Reputation: 9625

<span> cannot contain <div>. Most likely the browser is "correcting" this for you by placing the <div> after the <span>, where your CSS rule would not apply.

if you change <span> to <div> your example works as expected.

Upvotes: 0

Steve
Steve

Reputation: 8640

background-color does not get inherited!

Background properties are not inherited, but the parent box's background will shine through by default because of the initial 'transparent' value on 'background-color'.

http://www.w3.org/TR/CSS21/colors.html#background

However, nested element that do not have a background color might show the background color of the element behind it.

So for your cases:

  • The first example works, because the inner span doesn't have a background color and the background of the div shines through.

  • The second example doesn't work, because only the <span> (inline element) portion gets the background color, but doesn't wrap the nested <div> (block element).

  • The third example doesn't work, because the <td> has its own background color and therefore nothing shines through

Upvotes: 4

Axel
Axel

Reputation: 10772

You have a couple issues.

  1. You have a <div> tag inside of a <span> tag, which is not correct.

  2. Your CSS is td { background-color: #8AE; }, but you're applying a yellow background color to the <tr> tag, which is a parent of the <td>.

I've updated your CSS to this:

tr { background-color: #8AE; }

And your HTML to this:

<body>
    <div style="background-color: yellow">
        yellow <span>and yellow too</span>
    </div>
    <div style="background-color: yellow !important ">
        yellow <span>not yellow but expecting to be</span>
    </div>
    <table>
      <thead>
      </thead>
      <tbody>
        <tr style="background-color: yellow !important">
          <td> expecting to be yellow </td>
        </tr>
      </tbody>
    </table>
</body>

You can see it works as intended here: http://jsfiddle.net/yHgTt/2/

Upvotes: 0

Related Questions