-2

Lets say I have 2 tables. The 2nd one got an id "mytab".

<table>
  <tr>
    <td>abc</td>
  </tr>
</table>

<table id="mytab">
  <tr>
    <td>xyz</td>
  </tr>
</table>

Now I want a CSS for just the 2nd one but for all child-elements too (table has children th, tr, td). What would the CSS-selector look like??

I tired these 2 selectors, but none did the trick.

This would address all tables - not just the 2nd one.

table, th, tr, td
{
    border: 1px solid black;
    border-collapse: collapse;
}

This would address the correct table but not the children beause they do not have the id set.

table#mytab, th#mytab, tr#mytab, td#mytab
{
    border: 1px solid black;
    border-collapse: collapse;
}
chris01
  • 10,921
  • 9
  • 54
  • 93

1 Answers1

2

you need to target the parent then use * to select all childs, so like parent *

table#mytab , table#mytab *
{
    border: 1px solid black;
    border-collapse: collapse;
}
<table>
  <tr>
    <td>abc</td>
  </tr>
</table>

<table id="mytab">
  <tr>
    <td>xyz</td>
  </tr>
    <tr>
    <td>asd</td>
  </tr>
    <tr>
    <td>zxc</td>
  </tr>
</table>
Burham B. Soliman
  • 1,380
  • 1
  • 9
  • 13
  • 1
    It's the space that makes this target *descendants* (which aren't just children; you need to target descendants, and the question made the same mistake, but the distinction is very important). – Quentin Jan 24 '23 at 12:33
  • @Quentin totally agree, but i just focused on his CSS code as he was targeting childs and descendants too when he targetd, tr, td, but he has to edit it as per required using the child it self instead of `*` – Burham B. Soliman Jan 24 '23 at 12:41