Table row is not picking up class - html

Question

I have a simple HTML code where I draw a table and assign different classes to the Alternative rows :
<div id="content">
....
<table>
<tr class="a1"> ... </tr>
<tr class="a2"> ... </tr>
</table>
....
</div>
In my CSS I have the following definitions
#content {
float: right;
width: 98%;
padding-top: 15px;
}
#content tr.a1 {
background-color: #F1F1F1;
}
#content tr.a2 {
background-color: #F2FFFF;
}
When my HTML page loads background color remains white.
However if I update my CSS by removing "#content" :
tr.a1 {
background-color: #F1F1F1;
}
tr.a2 {
background-color: #F2FFFF;
}
everything works correctly. It seems like link to "content" property is not working. How can I fix it?
thank you in advance.

Answer 1

You need to wrap additionally in <td>...</td> tags.
Here is the correct structure for a regular table:
<table>
<tr>
<td>John</td>
<td>Doe</td>
</tr>
<tr>
<td>Jane</td>
<td>Doe</td>
</tr>
</table>
You can read more here.
#content {
float: right;
width: 98%;
padding-top: 15px;
}
#content tr.a1 {
color: #F1F1F1;
}
#content tr.a2 {
color: #F2FFFF;
}
<div id="content">
<table>
<tr class="a1">
<td>123<td>
</tr>
<tr class="a2">
<td>123<td>
</tr>
</table>
</div>

Answer 2

If you write #content tr.a1 it means tr is right after #content
which is obviously not, you have table in between.
I STAND CORRECTED
I have been honestly coding for 10 years wrong...
.class1 .class2 .name1 .name2 Selects all elements with name2 that
is a descendant of an element with name1
You can write that like this to work:
#content * tr.a1
or
#content table tr.a1
Please learn how to use CSS Selectors
Examples:
#content {
float: right;
width: 98%;
padding-top: 15px;
}
#content table tr.a1 {
background-color: red;
}
#content * tr.a2 {
background-color: blue;
}
<div id="content">
<table>
<tr class="a1">
<td>tr 1</td>
</tr>
<tr class="a2">
<td>tr 2</td>
</tr>
</table>
</div>