Within a webpage, there is a table nested inside another table. The CSS class first-child assigns a blue background to the first row. How can I prevent this specific styling from affecting the nested table?
Please keep in mind that modifying the original styles is not an option.
Access the JSFiddle here: https://jsfiddle.net/a0muwsk1/
The last CSS block, .Main table table td, failed at overriding the first-child styling...It proved ineffective.
Below is the identical code snippet from the fiddle page:
HTML:
<table class="Main">
<tr>
<td>This</td>
<td>is</td>
<td>first</td>
<td>child</td>
</tr>
<tr>
<td>A</td>
<td>Regular</td>
<td>Row</td>
<td>
<table>
<tr>
<td>Nested</td>
<td>first</td>
<td>child</td>
</tr>
<tr>
<td>Nested</td>
<td>Table</td>
<td>Row</td>
</tr>
</table>
</td>
</tr>
</table>
CSS:
.Main table
{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
.Main tr:first-child td
{
background-color: blue;
text-align: center;
border-width: 0px 0px 1px 1px;
font-family: Arial;
font-weight: bold;
color: white;
}
.Main td
{
border: 1px solid black;
text-align: center;
font-family: Arial;
color: black;
}
.Main table table td
{
border: 1px solid black;
text-align: center;
font-family: Arial;
color: black;
}