How can i select elements right after a :first-child in CSS? - html

Question

Im trying to select a section on a table by making its border thicker on a selected area, so I need to change the border on specifics cells to get something like this.
this is my best try for the upper one.
every selected cell has a "selected" class, and if there is a selected cell, the row has a selected class too. I hope you get it ;)
.table tr.selected:first-child td.selected{
border-top-width:5px;
border-top-color:#000;
}
is it possible?

Answer 1

If you are not restricted with these specific class names, you can add a custom class to cells of the last selected row. If you cannot modify the HTML, you can try to add the custom classes with JavaScript.
var selectedRows = document.querySelectorAll('tr.selected');
selectedRows[selectedRows.length-1].classList.add('last-selected-row');
table{
border-collapse: collapse;
}
table tr td{
border: 1px solid #e2e4e8;
padding: 10px;
}
table td.selected{
background-color: #cae5cd;
}
table tr.selected td.selected:first-child{
border-left: 3px solid black;
border-right: none;
}
table tr.selected td.selected:last-child{
border-right: 3px solid black;
border-left: none;
}
table tr.selected td.selected + td:not(.selected){
border-left: 3px solid black;
}
table tr:not(.selected) + tr.selected td.selected{
border-top: 3px solid black;
border-bottom: 1px solid #e2e4e8;
}
table tr.last-selected-row td.selected{
border-bottom: 3px solid black;
}
<table>
<tr>
<td>far east</td>
<td></td>
<td>USD</td>
</tr>
<tr>
<td>pol</td>
<td>pod</td>
<td>USD</td>
</tr>
<tr class="selected">
<td class="selected">VALENCIA MADRID</td>
<td class="selected">BRISBANE</td>
<td>USD</td>
</tr>
<tr class="selected">
<td class="selected">VALENCIA MADRID</td>
<td class="selected">Melbourne</td>
<td>USD</td>
</tr>
<tr class="selected">
<td class="selected">VALENCIA MADRID</td>
<td class="selected">SYDNEY</td>
<td>USD</td>
</tr>
<tr>
<td>VALENCIA MADRID</td>
<td>Chongoing</td>
<td>USD</td>
</tr>
</table>
The padding and the border styles I have added in the snippet are just for demo purpose.