I'm struggling to figure out how to select a specific cell within a colgroup. Here's an example of what I'm trying to achieve:
table {
position:relative;
top:50px;
margin:0 auto;
border-collapse:collapse;
}
td, th {
border:1px solid black;
width:75px;
height:25px;
}
.first {
background-color:red;
}
.second {
background-color:yellow;
}
.third {
background-color:green;
}
.cell {
background-color:white;
}
.first .cell {
text-align:left;
border:5px solid black;
color:red;
}
.second > .cell {
text-align:center;
border:5px solid black;
color:red;
}
.third .cell {
text-align:right;
border:5px solid black;
color:red;
}<table>
<colgroup>
<col span=2 class='first'>
<col span=2 class='second'>
<col span=2 class='third'>
</colgroup>
<thead>
<th colspan=6>asdad</th>
</thead>
<tbody>
<tr>
<th>asdad</th>
<td class='cell'>One</td>
<th>asdad</th>
<td>fghfghf</td>
<th>sdadsad</th>
<td>yututu</td>
</tr>
<tr>
<th>asdad</th>
<td>jhkjhk</td>
<th>asdad</th>
<td class='cell'>Two</td>
<th>sdadsad</th>
<td>yututu</td>
</tr>
<tr>
<th>asdad</th>
<td>jhkjhk</td>
<th>asdad</th>
<td>fghfghf</td>
<th>sdadsad</th>
<td class='cell'>Three</td>
</tr>
</tbody>
</table>I've tried various selectors from here, but none seem to be working. How can I accomplish my goal? I also want to be able to select the #cell elements using JavaScript or jQuery. $('.first #cell') is not working for me. $('.first').find('#cell') has also been unsuccessful.