0

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.

Bogdan Prădatu
  • 325
  • 5
  • 15
  • 1
    the id of the element should be different – Sanjit Bhardwaj Feb 19 '20 at 07:42
  • 2
    IDs must be unique within the scope of an HTML document. – misorude Feb 19 '20 at 07:43
  • 2
    _“from within a colgroup”_ - the table cells may be logically grouped by the `colgroup` element - but that does not make them actual _descendants_ of it in the DOM. If you want to (after fixing the ID issue) select cells that are in a certain column group only - then you will have to do that via their index in their row or something. – misorude Feb 19 '20 at 07:45
  • 3
    instead of `id='cell'` you can use `class="cell"` and you can select by class operator `$('.cell')` – Manu Varghese Feb 19 '20 at 07:45
  • "IDs must be unique within the scope of an HTML document." Changed to class, as Manu Varghese suggested. Still won't work, probably due to what misorude said. – Bogdan Prădatu Feb 19 '20 at 07:46
  • 1
    first of all, you can not take same ID and NAME it should be once. – Harsimranjit Singh Feb 19 '20 at 07:47

1 Answers1

0

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

Floyd
  • 124
  • 9