Справочная таблица данных через CSS?

Question

Привет, сообщество переполнения стека, у меня был следующий HTML-код

<td data-th="Select" aria-label="Select " tabindex="0" role="checkbox"></td>

Мне было интересно, есть ли какой-нибудь возможный способ ссылаться на это через CSS?Если так, то как?

Answer 1

Если атрибут данных является уникальным, вы можете указать следующее:

td[data-th="Select"] {
  display: none;
}

<table>
  <tr>
    <td>Nothing</td>
    <td data-th="Select" aria-label="Select " tabindex="0" role="checkbox">Hidden</td>
    <td>Here</td>
  </tr>
</table>

Answer 2

Селектор атрибута CSS сопоставляет элементы на основе наличия или значения данного атрибута.Таким образом, вы можете использовать селектор [attr=value], чтобы сопоставить элемент с атрибутом attr, значение которого value.В вашем случае селектор [data-th="Select"] будет работать:

td[data-th="Select"] {
    display: none;
}

.table td {
  padding: 10px;
  border: 1px solid #777;
}

<table class="table">
  <tr>
    <td>Some data</td>
    <td data-th="Select" aria-label="Select " tabindex="0" role="checkbox">Data to hide</td>
    <td>Other data</td>
  </tr>
</table>