Home Is it possible to use :not pseudo selector containing adjacent sibling combinator?

Questions

Is it possible to use :not pseudo selector containing adjacent sibling combinator?

March 28, 2023

What I am trying to achieve – when table footer is rendered, I want to remove the border radius from the table cells within the last tr inside table body. Not sure if the following code should even work:

table tbody:not(+ tfoot) tr td {
  border-radius: 0;
}

table {
  border-collapse: separate;
  border-spacing: 0;
}

td {
  border: 1px solid;
  border-radius: 4px;
  background-color: red;
}

table tbody:not(+ tfoot) tr td {
  border-radius: 0;
}

<table class=with-footer>
  <tbody>
    <tr><td>Body cell</td></tr>
    <tr><td>Body cell</td></tr>
  </tbody>
  <tfoot>
    <tr><td>Footer cell</td></tr>
  </tfoot>
</table>

I am open to other suggestions too, maybe I am overcomplicating the task.

>Solution :

You can be more compatible (including with current Firefox) with :last-child:

table {
  border-collapse: separate;
  border-spacing: 0;
}

td {
  border: 1px solid;
  border-radius: 4px;
  background-color: red;
}

table > tbody:not(:last-child) > tr:last-child > td {
  border-radius: 0;
}

<table class=with-footer>
  <tbody>
    <tr><td>Body cell</td></tr>
    <tr><td>Body cell</td></tr>
  </tbody>
  <tfoot>
    <tr><td>Footer cell</td></tr>
  </tfoot>
</table>