Prevent a cascade with CSS

Question

Suppose I have the HTML below. Is there any way to prevent the background-color cascading into the inner table? I.E. leaving the HTML exactly as it is and only modifying the CSS class can I achieve this:

enter image description here

.myClass table {
  background-color: red;
}

<body>
  <div class="myClass">
    <table>
      <tr>
        <td>
          <div>
            <table>
              <tr>
                <td>Hello</td>
              </tr>
            </table>
          </div>
        </td>
        <td>World</td>
      </tr>
    </table>
  </div>
</body>

patrick · Accepted Answer

I created a code snippet for you:

.myClass table td:nth-child(2) {
  background-color: red;
}

<body>
  <div class="myClass">
    <table>
      <tr>
        <td>
          <div>
            <table>
              <tr>
                <td>Hello</td>
              </tr>
            </table>
          </div>
        </td>
        <td>World</td>
      </tr>
    </table>
  </div>
</body>

Basically you tell CSS to make the background of the 2nd TD in the table the red background:

.myClass table td:nth-child(2){
    background-color:red;
}

More info on nth-child() here.

Wim Mertens · Answer

Use this instead:

.myClass > table { background: red; }

Prevent a cascade with CSS

Tags:

html

css

Nick

2 Answers

patrick

Wim Mertens

Recent Activity

Donate For Us

Prevent a cascade with CSS

Tags:

html

css

Nick

2 Answers

patrick

Wim Mertens

Related questions

Recent Activity

Donate For Us