CSS use of :not() selector on an inner table

Question

I am using AjaxControlToolkit and the main-page CSS is also affecting the inner "calendar" popup.

I've reduced everything to a simple 1-page example showing what I want, what I've tried, and the "ugly workaround". I'm looking for a proper CSS solution.

All information is in the example below:

table.my_table_padding {border-collapse: collapse;}

/* starting point (looks a mess) */
/* table.my_table_padding tr td {padding: 20px;background-color: greenyellow;} */

/* My attempts (neither worked) */ 
/* :not(.ajax_calendar) table.my_table_padding tr td {padding: 20px;background-color: orange;} */ 
/* :not(div.ajax_calendar) table.my_table_padding tr td {padding: 20px;background-color: orange;} */ 

/* The workaround that is a mess and a horrid bodge - is there a better way in a single class, using a :not() ? */
table.my_table_padding tr td {padding: 20px;background-color: greenyellow;}
div.ajax__calendar table.my_table_padding tr td {padding: 0;background-color: white;} 

<table border="1" class="my_table_padding">
  <tr>
    <td>Header-text</td>
    <td>Sample Text... Sample Text...<br />Text is here</td>
  </tr>
  <tr>
    <td>Header-text</td>
    <td>
      <div class="ajax__calendar">
        <!-- Actually using a popup nuget:AjaxControlToolkit, this is an example -->
        See: <a href="https://ajaxcontroltoolkit.devexpress.com/Calendar/Calendar.aspx">AjaxControlToolkit Sample Page</a>
        <table border="1" class="my_table_padding">
          <tr><td colspan="7">Popup calendar-control</td></tr>
          <tr><td>Sun</td><td>Mon</td><td>Tue</td><td>Wed</td><td>Thu</td><td>Fri</td><td>Sat</td></tr>
          <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
          <tr><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td><td>13</td><td>14</td></tr>
        </table>
      </div>
    </td>
  </tr>
</table>

EDIT 1 (to clarify what I'm after)

Basically, I've found one ugly way to achieve the desired display results 1 - adding the original CSS-rule [table.my_table_padding tr td] 2 - Adding another CSS-rule underneath it [div.ajax__calendar table.my_table_padding tr td] that has the reverse-effect of all the changes in the first rule

but, this approach seems messy. I was wondering if there was a better way of phrasing the original (CSS rule 1), in such a way that it picked all tables other than children of the "div class=ajax__calendar" element.

EDIT 2 - The original ASP.NET Webforms code

<asp:DetailsView runat="server" ID="detv_Main" CssClass="my_table_padding detv_example">
 <Fields>
  <asp:TemplateField HeaderText="Start Date" SortExpression="EventStartDate">
   <EditItemTemplate>
     <asp:TextBox ID="txt_EventStartDate" runat="server" Text='<%# Bind(example) %>' CssClass="edit_background"></asp:TextBox>
     <ajaxToolkit:CalendarExtender ID="calext_EventStartDate" TargetControlID="txt_EventStartDate" runat="server" Format="d MMM yyyy" />
  </EditItemTemplate>
  <ItemTemplate>Example date</ItemTemplate>
</asp:TemplateField>

Answer 1

As far as making the CSS only apply to the parent table, you need to use the child combinator (>) in addition to the :not. Without the child combinator, the inner table still matches the rule because the descendants of the inner table (which is excluded by the :not) are also descendants of the outer table (which is not excluded by the :not).

To use the child combinator with a table and tr you have to include the implicit tbody. The net result for your selector is this:

:not(.ajax__calendar) table.my_table_padding > tbody > tr > td

That will get you most of the way there. However, the default background color is transparent, so your inner table will have the same background as the outer table unless something in between sets it. I chose to set it directly on .ajax__calendar but you could choose to put it on any descendant of the outer td (where the background color is getting set).

table.my_table_padding {border-collapse: collapse;}

:not(.ajax__calendar) > table.my_table_padding > tbody > tr > td {padding: 20px;background-color: greenyellow;}

/* This is necessary since the transparent background of the inner table would otherwise should the greenyellow of the outer table. This could be set at a different level as desired */
div.ajax__calendar {background-color: white;} 

<table border="1" class="my_table_padding">
  <tr>
    <td>Header-text</td>
    <td>Sample Text... Sample Text...<br />Text is here</td>
  </tr>
  <tr>
    <td>Header-text</td>
    <td>
      <div class="ajax__calendar">
        <!-- Actually using a popup nuget:AjaxControlToolkit, this is an example -->
        See: <a href="https://ajaxcontroltoolkit.devexpress.com/Calendar/Calendar.aspx">AjaxControlToolkit Sample Page</a>
        <table border="1" class="my_table_padding">
          <tr><td colspan="7">Popup calendar-control</td></tr>
          <tr><td>Sun</td><td>Mon</td><td>Tue</td><td>Wed</td><td>Thu</td><td>Fri</td><td>Sat</td></tr>
          <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
          <tr><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td><td>13</td><td>14</td></tr>
        </table>
      </div>
    </td>
  </tr>
</table>