Today, I delved into the world of CSS3 and HTML5 through Codecademy.
HTML:
<table class="main">
<tr class="questioncontainer">
<td class="serialnumber">1.</td>
<td class="question" colspan="2">What is the question?</td>
</tr>
<tr>
<td></td>
<td>
<table class="notmain">
<tr>
<td>
<div class="answer">Answer 1</div>
</td>
<td>
<div class="answer">Answer 2</div>
</td>
</tr>
<tr>
<td>
<div class="answer">Answer 3</div>
</td>
<td>
<div class="answer">Answer 4</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
CSS:
table.main {
text-align: center;
width: 75vw;
margin-top: 15%;
margin-left: auto;
margin-right: auto;
border-collapse: collapse;
background-color: #fff3f3;
}
table.main tr td:first-child {
border-right: thin solid lightgray;
}
I am seeking to target all the leftmost table cells of the top table specifically. This means selecting the first td element of each tr within the main table.
The selector table.main tr td:first-child also affects the inner table cells, which is not my desired outcome. Attempts with
table.main>tr>td:first-child.main>tr>td:first-child, and table>tr>td:first-child failed to work as expected, failing to target the top table's td elements altogether.
What would be the appropriate selector in this case, and what was incorrect about the attempts I made? Ideally, I want to avoid assigning a specific class to those targeted td elements.
For reference, here is the Fiddle link: http://jsfiddle.net/x70srmae/1/