CSS to hide all theads other than first table [duplicate] - css

Question

This question already has answers here:
What is the difference between :first-child and :first-of-type?
(4 answers)
Closed 2 months ago.
I'm trying to hide all <thead></thead> except first table by using the following CSS rule:
#media screen {
.container>table:not(:first-child)>thead {
display: none !important;
}
}
<div class="container">
<div>Table Caption</div>
<table>
<thead></thead>
<tbody></tbody>
</table>
<div>Table Caption</div>
<table>
<thead></thead>
<tbody></tbody>
</table>
<div>Table Caption</div>
<table>
<thead></thead>
<tbody></tbody>
</table>
</div>
But this rule hides all <thead></thead>. Any help?

Answer 1

You can use :not & :first-of-type Pseudo-classes on the table and the select it's child thead like below example. This will apply the CSS to all tables' thead except the first.
#media screen {
.container>:not(table:first-of-type)>thead {
display: none;
}
}
<div class="container">
<div>Table Caption</div>
<table>
<thead>
<tr>
<td>xyz-head</td>
</tr>
</thead>
<tbody>
<tr>
<td>xyz-body</td>
</tr>
</tbody>
</table>
<div>Table Caption</div>
<table>
<thead>
<tr>
<td>zxc-head</td>
</tr>
</thead>
<tbody>
<tr>
<td>zxc-body</td>
</tr>
</tbody>
</table>
<div>Table Caption</div>
<table>
<thead>
<tr>
<td>esd-head</td>
</tr>
</thead>
<tbody>
<tr>
<td>esd-body</td>
</tr>
</tbody>
</table>
</div>

Answer 2

The first table is not the first child in the container.
You need first-of-type
.container>table:not(:first-of-type)>thead {
display: none;
}
<div class="container">
<div>Table Caption</div>
<table>
<thead>
<tr>
<th>thead1</th>
</tr>
</thead>
<tbody></tbody>
</table>
<div>Table Caption</div>
<table>
<thead>
<tr>
<th>thead2</th>
</tr>
</thead>
<tbody></tbody>
</table>
<div>Table Caption</div>
<table>
<thead>
<tr>
<th>thead3</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
Note - I have put in fuller mark up (you need tr and th elements in the thead to see the content selected correctly).