2

I have a scenario where I want to target all tables (or any element) in the page / a container except those elements inside a special container or class (for example .exempt-table) .

I tried it using :not() selector to target "All tables except those inside .exempt-table" as follows:

.container :not(.exempt-table) table { 
  border: 5px solid red;
}

Here is the complete example:

div {
  border: 1px solid blue;
  padding: 5px;
}

div::before {
  content: 'DIV';
}

.container :not(.exempt-table) table {
  border: 5px solid red;
}
<div class="container">
    <div>
        <h1>General Table. Table1</h1>
        <table>
            <tr>
                <td>COl1</td>
                <td>COl1</td>
                <td></td>
            </tr>
            <tr>
                <td>COl1</td>
                <td>COl1</td>
                <td></td>
            </tr>

        </table>
    </div>
    <div class="exempt-table">
        <h1>Special Table. Table2</h1>
        <table>
            <tr>
                <td>COl1</td>
                <td>COl1</td>
                <td></td>
            </tr>
            <tr>
                <td>COl1</td>
                <td>COl1</td>
                <td></td>
            </tr>
        </table>
    </div>
    <div>
        <h1>NESTED: General Table. Table3</h1>
        <div>

            <table>
                <tr>
                    <td>COl1</td>
                    <td>COl1</td>
                    <td></td>
                </tr>
                <tr>
                    <td>COl1</td>
                    <td>COl1</td>
                    <td></td>
                </tr>

            </table>
        </div>
    </div>
    <div class="exempt-table">
        <h1>NESTED: Special Table. Table4</h1>
        <div >
            <table>
                <tr>
                    <td>COl1</td>
                    <td>COl1</td>
                    <td></td>
                </tr>
                <tr>
                    <td>COl1</td>
                    <td>COl1</td>
                    <td></td>
                </tr>
            </table>
        </div>
    </div>
</div>

Expectation is, border (red) should not be applied to Table2, Table4 because these tables are inside .exempt-table. But, the border applied to all tables except Table2 because Table2 is direct child if .container where as Table4 is just descendant.

27th Nov: Updated the above example to address the issue with > table.

pgollangi
  • 848
  • 3
  • 13
  • 28
  • you will need two selector for this – Temani Afif Nov 23 '18 at 12:16
  • Table 4 is also in a div without a class, which is a match for `:not(.exempt-table)`. So you should avoid situations like those. You can use `:not(.exempt-table) > table` here. – Mr Lister Nov 23 '18 at 12:17
  • Hi @TemaniAfif unlike the duplicated question where styles overridden, I dont the border to be applied at all for tables inside ".exempt-table' instead of applying to all and override again. Hope this make sense. – pgollangi Nov 27 '18 at 03:24
  • the duplicate explain that you cannot do this using one selector, that's why I added it as a duplicate. You can also follow the duplicate of the duplicate for more details – Temani Afif Nov 27 '18 at 08:26

1 Answers1

-1

please try this style

<style>
      .container :not(.exempt-table) > table {
        border: 5px solid red;
      }
    </style>
AddWeb Solution Pvt Ltd
  • 21,025
  • 5
  • 26
  • 57