In my HTML, I have a table as shown below:
var selector = $("#searchResultsArea");
$.getJSON(url, null, function (data) {
selector.empty();
var html = "<table id=\"tabRoom\" style=\"width: 950px; border:none\"
class=\"selectable\">
<thead><tr>
<th class=\"ui-widget-header\">Code</th>
<th class=\"ui-widget- header\">Alias</th></tr></thead><tbody>";
html += "<tr onclick=\"editRoom(" + optionData.Id + ");\"
class=\"" + (i % 2 ? "gridrow" : "gridrow_alternate") + "\">
<td style=\"width: 50%\">" + optionData.Code + "</td>
<td style=\"width: 50%\">" + optionData.Alias + "</td></tr></tbody></table>";
selector.append(html);
});
I expected the following CSS code to work:
tr.myClass
{
background: red;
}
However, in the project I am working on, the above code is not functioning. Surprisingly, when I modify the code like this:
tr.myClass>td
{
background: red;
}
it works and changes the background color of all cells in the row to red. I am curious to know why omitting >td does not work as expected. With thousands of lines of CSS codes, I'm unsure where to start looking for the issue. Any guidance would be appreciated. Thank you!
EDIT: Appreciate highlighting the syntax error, but it was fixed while composing this question. The actual problem lies in understanding why >td is necessary.
EDIT2: Updated code provided.