I'd like to apply a style only to an outer element (a table), not for the nested on.
Due to the complexity of the system (and since I don't know for sure which other formats are used for the inner tables) I don't want to change the style for all elements first and then overwrite them for the nested ones (that's easy) but really only address the outer elements / tables (also I can't apply classes for now, because them I have to fix that I a bunch of code).
So I have something like that:
<body>
<div>
<...>
<table>
<tr>
<td>
<table>
<tr>
<td>
I'm some content!
</td>
</tr>
</table>
</td>
</tr>
</table>
<...>
</div>
</body>
CodePen: https://codepen.io/MichaelBootstrap/pen/bGBEbYy
First try was
body *:not(table) table:not(.no_tab_margin) {
border: thin solid green; /* just to visualise it */
}
(I use the class .no_tab_margin to stop that ugly fix on all pages, where I change the layout to responsive)
But due to the right-to-left resolution of the browsers, this is still applied to all tables.
How do I have to change the CSS selector such that it only applies on outer tables?
To prevent typical answers: Yes, that would do, but overwrite/reset other styling from the inner tables:
table:not(.no_tab_margin) {
border: thin solid green;
}
table table:not(.no_tab_margin) {
border: unset; /* all borders from all inner tables are gone */
}
If I didn't find a solution with CSS I will write a small jQuery script (Apply a class on all outer tables), that will do that.
To stop discussions about nested tables: Yes, that's long outdated. But I can't change it right now. The system contains more than 500 form/pages, which are generated by PHP. And, yes - I will remove them step by step (and make it all responsive), but that's my job for the next2-3 years - no joke).
Same is also relevant for nested lists (<ul><li><ul> ...) so that not only a special question only for old systems.
question from:
https://stackoverflow.com/questions/66047418/how-can-i-select-only-the-outer-element-table-list 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
