Menu
we have
<div class="xTable">
<table>
<tr>
<td>
<div class="xTable">
<table>
<tr>
<td>
<div class="xTable">
<table>...</table>
</div>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
How do I apply custom css styles to 2nd div, only to 2nd div and not to 1 or 3 or deeper?
NO WAY TO ADD EXTRA CLASSES or IDS! Html is generated dynamically and is unmanageable.
I would use
.xTable table .xTable
but that means 3rd and deeper divs will be affected.
no IDs! Please CSS selectors only.
Thanks!
430
To cater fully for both this default markup and browsers which correctly add a tbody where it isn't already specified you'd need to use:
body > .xTable > table > tr > td > .xTable,
body > .xTable > table > tbody > tr > td > .xTable {
...
}
JSFiddle example.
This assumes that your first <div class="xTable"> has no parents other than <body>. If this isn't the case then replace body with your parent.
131
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
