Apply :not in nested table

Question

table.parent td:nth-of-type(1):not(table.nested td){
  color: red; 
}

<table class="table parent">
<tbody>
    <tr>
    <td>TEXTA</td>
    <td>TEXTB</td>
    </tr>
    <tr>
    <td>Has nested table below
        <table class="table nested">
        <tbody>
        <thead>
        <th>S.No.</th>
        <th>Name</th>
        <th>Contact</th>
        </thead>
        <tr>
        <td>1</td>
        <td>ABC</td>
        <td>PQR</td>
     </tr>
     </tbody>
     </table>
     </td>
     </tr>
   <tr>
    <td>TEXTC</td>
    <td>TEXTD</td>
    </tr>
</tbody>
</table>

I have a nested table as follows -

<table class="table parent">
<tbody>
    <tr>
    <td>TEXTA</td>
    <td>TEXTB</td>
    </tr>
    <tr>
    <td>Has nested table below
        <table class="table nested">
        <tbody>
        <thead>
        <th>S.No.</th>
        <th>Name</th>
        <th>Contact</th>
        </thead>
        <tr>
        <td>1</td>
        <td>ABC</td>
        <td>PQR</td>
     </tr>
     </tbody>
     </table>
     </td>
     </tr>
   <tr>
    <td>TEXTC</td>
    <td>TEXTD</td>
    </tr>
</tbody>
</table>

Requirement - Only TEXTA and TEXTB should be colored in red. In real scenario there are many rows. I want only the first td of each row in the parent table to be colored. I am doing something like -

table.parent td:nth-of-type(1):not(table.nested td){
  color: red; 
}

This is not giving me any result. What is the correct way of achieving this?

Tables should be used for tabular data. And it's very seldom when nested tables are really necessary. I believe your case is not exception. HTML5 provides sufficient quantity of elements to layout documents. See also [w3c recomedations](https://www.w3.org/TR/html401/struct/tables.html#h-11.1) — Alexander, Sep 19 '20 at 12:54

score 1 · Answer 1 · answered Sep 19 '20 at 12:23

1

Spent a while playing around with this. The best I can do is to suggest using 2 lines of CSS rather than 1. One selector to do all of the first row of td and one to set the nested ones back to how they belong.

table.parent tr:first-child td {
  color: red; 
}

table.nested tr:first-child td {
  color: black; 
}

<table class="table parent">
<tbody>
    <tr>
    <td>TEXTA</td>
    <td>TEXTB</td>
    </tr>
    <tr>
    <td>Has nested table below
        <table class="table nested">
        <tbody>
        <thead>
        <th>S.No.</th>
        <th>Name</th>
        <th>Contact</th>
        </thead>
        <tr>
        <td>1</td>
        <td>ABC</td>
        <td>PQR</td>
     </tr>
     </tbody>
     </table>
     </td>
     </tr>
   <tr>
    <td>TEXTC</td>
    <td>TEXTD</td>
    </tr>
</tbody>
</table>

answered Sep 19 '20 at 12:23

evilgenious448

518
2
11

the reason I didn't use this method is because in real scenario there are other styles also which I am applying . These too get inherited. While this fix works for color property, it fails for opacity. ( I don't understand why). For example, if I apply 70% opacity in table.parent td:first-child{} , it gets reflected in the table too which I am just not able to change back to 100% . Isn't there any direct way to achieve this without having to apply and reapply css? – Ityka Bandta Sep 19 '20 at 12:46
@ItykaBandta I think opacity is a unique one since you can not have the parent be like `opacity: 0.5` but the child to be `opacity: 1`. This is avoided by using `rgba()` for `background-color` but otherwise I am not sure. Sadly I could not find a way to do what you are asking with 1 line of CSS – evilgenious448 Sep 19 '20 at 13:35
Makes sense. I am thinking if I could handle this scenario using scripting. Like we have .has() to filter out elements. So, let's say I want to add background only to the td which contains nested table, I would write something like $( "td" ).has( "table" ).css( "background-color", "red" ); and it works. Is there anything opposite of :has in jquery or JS? That would solve the problem. – Ityka Bandta Sep 19 '20 at 13:43
@ItykaBandta I am not sure, as I am not expert with JS or Jquery. I would repost this question, but asking for a JS or Jquery answer. – evilgenious448 Sep 19 '20 at 13:50

francisco neto · Answer 2 · 2020-09-19T13:51:21.810

You said that..

I want only the first td of each row in the parent table to be colored

So, I am assuming you want TEXTA and TEXTC to be colored (and not TEXTB as you stated).

If thats the case, then your idea was to select elements (first td of each row) if they dont contain a specific child element (table.nested).

This is not possible with CSS2 or CSS3.

The CSS2 and CSS3 selector specifications do not allow for any sort of parent selection.

See CSS selector - element with a given child

Edit

You can use jquery/javascript to do so.

For example, to add opacity and color css properties:

$(document).ready(function(){
  $('table.parent > tbody > tr > td:first-child').each(function(){

  if ($(this).has('table.nested').length == 0){
    $(this).css('opacity', '0.5');  
    $(this).css('color', 'red');
  }

  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table class="table parent">
<tbody>
    <tr>
      <td>TEXTA</td>
      <td>TEXTB</td>
    </tr>
    <tr>
      <td>Has nested table below
        <table class="table nested">
          <thead>
            <th>S.No.</th>
            <th>Name</th>
            <th>Contact</th>
          </thead>
          <tbody>
            <tr>
              <td>1</td>
              <td>ABC</td>
              <td>PQR</td>
            </tr>
          </tbody>
        </table>
     </td>
   </tr>
   <tr>
    <td>TEXTC</td>
    <td>TEXTD</td>
   </tr>
</tbody>
</table>

Can you suggest me an alternative solution ? Take the case of opacity. I want to add 0.7 opacity to only TEAXTA and TEXTC . I don't want the table to get this style. How do I do it? — Ityka Bandta, Sep 19 '20 at 12:59
i've just edited my answer and included a jquery code that solves the problem. — francisco neto, Sep 19 '20 at 13:57
This is a good solution ! If I just want to exclude the table content and also color the "Has nested table below" text as red too , would that be possible? — Ityka Bandta, Sep 19 '20 at 14:07

score 0 · Answer 3 · answered Sep 19 '20 at 12:22

0

Just give some class to TEXTA & TEXTB for example: (html)

<td class="red-color-text">TEXTA</td>
<td class="red-color-text">TEXTB</td>

(css)

.red-color-text{color: red;}

answered Sep 19 '20 at 12:22

Filip Kozomara

1

2

I feel like if OP wanted to do a solution like this he would have put it in. I am sure they are looking for a more CSS based solution. – evilgenious448 Sep 19 '20 at 12:23

Apply :not in nested table

3 Answers3