How to use the :not() selector?

Question

I have a html template:

<div class="table-vertical">
  <table class="table">
    <thead>
      <tr>
        <th></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <div class="picker">
            <table>
              <thead>
                <tr>
                  <th></th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td></td>
                </tr>
              </tbody>
            </table>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

And I use styles for this table:

.table-vertical,
.table-vertical tbody,
.table-vertical thead,
.table-vertical td,
.table-vertical tr {
  display: block;
}

But I need to ignore the second table inside td element and class .picker, so I tried:

.table-vertical,
.table-vertical :not(.picker) tbody,
.table-vertical thead,
.table-vertical :not(.picker) td,
.table-vertical :not(.picker) tr {
      display: block;
}

But this does not work. So how to ignore second table inside td and div?

See http://stackoverflow.com/questions/7084112/css-negation-pseudo-class-not-for-parent-ancestor-elements and http://stackoverflow.com/questions/20869061/is-the-css-not-selector-supposed-to-work-with-distant-descendants — BoltClock, Sep 06 '17 at 18:31

Michael Benjamin · Accepted Answer · 2017-09-06T18:52:18.687

Your :not() selectors actually work. The problem is your selectors are structured to satisfy multiple scenarios.

Here's an example:

.table-vertical :not(.picker) tbody

tbody is a descendant of .picker, so it is excluded.

But, tbody is also a descendant of .table-vertical, so it is included.

This is the reason your :not() selectors aren't applying. They are overridden by the selectors that do apply.

Try this approach:

There are two table elements in your HTML structure.
One is a child of .table-vertical
The other is a child of .picker
So, target only the child of .picker for exclusion.

.table-vertical,
.table-vertical :not(.picker) > table {
  display: block;
  background: aquamarine !important;
}

.table-vertical {
  padding: 5px;
}

.table {
  border: 2px dashed red;
  width: 300px;
  height: 200px;
}

.picker {
  width: 200px;
  height: 100px;
}

.picker,
.picker * {
  background-color: orange;
}

<div class="table-vertical">
  <table class="table">
    <thead>
      <tr>
        <th>primary table</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <div class="picker">
            <table>
              <thead>
                <tr>
                  <th>picker table</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td></td>
                </tr>
              </tbody>
            </table>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

For another take on this scenario, see this post: https://stackoverflow.com/a/42353253/3597276

I think op has `.table-vertical, .table-vertical :not(.picker) tbody,.table-vertical thead,.table-vertical :not(.picker) td, .table-vertical :not(.picker) tr` — Dalin Huang, Sep 06 '17 at 17:30
@DanielH, yes, you're right. I pasted the code into jsFiddle. Then I hit "tidy", which removed the spaces! — Michael Benjamin, Sep 06 '17 at 17:31

How to use the :not() selector?

1 Answers1