css for html element except moment when element has defined overlay

Question

I have the following html code:

<div class="content">
<p><table> <tr><td>sadsa</td><td>sadasdsa</td></tr></table></p>
<p><p><table> <tr><td>sadadsa</td><td>asdasasdsa</td></tr></table></p></p>
<form><table> <tr><td><input></td><td><input></td></tr></table>
</div>

And css code:

.content  table tr td{
    color: white;
    padding: 3px;
    border: 1px solid white;
}

The html <table> can have any overlays and any numbers of them. I need that my css works for all of them except when <form> is the overlay.

In other words if .content has child <form> and <form> has child <table> my css shouldn't work. Between them can be other children / parents like <form><p><table>...</table></p></form> etc.

When you say "overlay" do you mean parent element? For example, are you trying to make table cells which are in a form one colour and table cells which are not in a form a different colour? — wf4, Dec 08 '15 at 14:04
your html is invalid and also tables should only be used for tabular data, the way you are using them doesn't look correct, but you want to have a look at css specificity and that will answer your question — Pete, Dec 08 '15 at 14:06

score 0 · Answer 1 · edited May 23 '17 at 11:52

by using :not() selector :

http://www.w3schools.com/cssref/sel_not.asp

i also changed your html, because of your <table> tags inside <p> which are not allowed:

Why is <table> not allowed inside <p>

.content :not(form) table tr td{
    color: white;
    padding: 3px;
    border: 1px solid white;
}

<div class="content">
  <div>
  <table>
    <tr>
      <td>sadsa</td>
      <td>sadasdsa</td>
    </tr>
  </table>
  </div>
  <div>
    <div>
      <table>
        <tr>
          <td>sadadsa</td>
          <td>asdasasdsa</td>
        </tr>
      </table>
    </div>
  </div>
  <form>
    <table>
      <tr>
        <td><input></td>
        <td><input></td>
      </tr>
    </table>
  </form>
</div>

Thank you for answer, but if table has no overlays with "div" this dont work — Фарид Кочегаров, Dec 08 '15 at 16:15

css for html element except moment when element has defined overlay

1 Answers1