Как я могу выбрать элементы сразу после: first-child в CSS?

Question

Я пытаюсь выбрать раздел в таблице, сделав его границу толще в выбранной области, поэтому мне нужно изменить границу отдельных ячеек, чтобы получить что-то вроде этого.

это моя лучшая попытка для верхнего. каждая выбранная ячейка имеет «выбранный» класс, и если есть выбранная ячейка, строка также имеет выбранный класс. Надеюсь, вы уловили;)

.table tr.selected:first-child td.selected{
    border-top-width:5px;
    border-top-color:#000;
}

возможно ли?

Answer 1

Если вы не ограничены этими c именами классов, вы можете добавить настраиваемый класс в ячейки последней выбранной строки. Если вы не можете изменить HTML, вы можете попробовать добавить настраиваемые классы с помощью 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>

padding и стили границ, которые я добавил в фрагмент, предназначены только для демонстрационных целей.