HTML Table nested selectors

Question

I want to select a certain cell from within a colgroup and can't figure out how. Below is an example:

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 have tried most selectors form here, but they don't seem to work. How can I achieve what I want? I would also want to select the #cell elements using Javascript or Jquery. $('.first #cell') is also not working. $('.first').find('#cell') also failed.

Answer 1

First of all, ids must be used only once on a page. That's the concept of ids: Being unique. So the idea of "finding the first occurence of #cell" is weird.

If you have the chance of giving ids to the table cells you want to select, things are very easy: Select them by their unique id:

#cell1
#cell2
#cell3
…

Same thing in jQuery:

$('#cell1')
$('#cell2')
$('#cell3')
…

But if you want to select a certain cell without id (or class), things might get a bit more complicated. Maybe you can try the nth-child-selector. https://www.w3schools.com/cssref/sel_nth-child.asp