CSS selector, multiple class's to style diferente elements [duplicate] - css

Question

This question already has answers here:
What do commas and spaces in multiple classes mean in CSS?
(9 answers)
Closed 1 year ago.
im trying to reduce lines of css and i cant figure out on how to do it. I have 2 tables and i want to style both with same styles and their's TD and TH too.
I have read, Multiple classes in CSS Selector , Multiple two-classes css-selector? , css multiple class / id selectors? , CSS selector for multiple sub-elements
What i have:
So 2 tables same styles. This is ok, it works.
.documents_table, #documento_detalhe {
font-family: 'Roboto', sans-serif;
border-collapse: collapse;
width: 100%;
}
But now how to select both tables and theirs TDs and THs?
This doenst work:
.documents_table, #documento_detalhe td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
border:0;
}
This is what i have but i want to reduce lines:
.documents_table td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
border:0;
}
#documento_detalhe td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
border:0;
}

Answer 1

You should know that by writing
.documents_table td, th, { styles } The styles are applied to all td inside .documents_table and to ALL th from your html. Not just the ones in the .documents_table . Your selector should be .documents_table td, .documents_table th
Having said that, to style the td and ths from both tables you should write
.documents_table td,
.documents_table th,
#documento_detalhe td,
#documento_detalhe th {
...styles
}
BUT, it would be better to add a common class to both tables like '.my-table' and so you would write just .my-table td, my-table th { styles } and it would apply to both.
See below
.my-table th, .my-table td {
color:red;
}
<table id="documento_detalhe" class="my-table">
<tr><th>TH #documento_detalhe<th></tr>
<tr><td> TD #documento_detalhe<th></tr>
</table>
<table class="documents_table my-table">
<tr><th>TH documents_table<th></tr>
<tr><td> TD documents_table<th></tr>
</table>