CSS селектор только для двух классов и никаких других

Question

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

Так что в этой таблице я хочу выбрать ячейки A и D для стиля из строки, но единственный различимый способ их выбора состоит в том, что у них нет классов.кроме .abc и .xyz.Так что, по сути, мне нужно выделить все ячейки, которые имеют какие-либо другие классы, например .def, .ghi.

<tr>
  <td class="abc xyz">A</td>
  <td class="abc xyz def">B</td>
  <td class="abc xyz ghi">C</td>
  <td class="abc xyz">D</td>
</tr>

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

td.abc.xyz:not(.def),
td.abc.xyz:not(.ghi) {
  /* Style to apply */
}

Так что, если кто-нибудь может указать мне правильное направление на что-нибудьэто могло бы помочь, это было бы очень ценно.

Answer 1

Вы можете рассмотреть селектор атрибута, но обратите внимание на пробелы и порядок:

[class="abc xyz"],
[class="xyz abc"] {
  color:red;
}

<table>
<tr>
  <td class="abc xyz">A</td>
  <td class="abc xyz def">B</td>
  <td class="abc xyz ghi">C</td>
  <td class="abc xyz">D</td>
  <td class="xyz abc">D</td>
  <td class="abc xyz ">this will fail</td>
</tr>
</table>

Если вы можете добавить JS, вы можете избежать проблемы с пробелами, используя trim

var td=document.querySelectorAll('td');
for(var i=0;i<td.length;i++)
  td[i].className=td[i].className.trim();

[class="abc xyz"],
[class="xyz abc"] {
  color:red;
}

<table>
<tr>
  <td class="abc xyz">A</td>
  <td class="abc xyz def">B</td>
  <td class="abc xyz ghi">C</td>
  <td class="abc xyz">D</td>
  <td class="xyz abc">D</td>
  <td class="abc xyz ">this will be good</td>
</tr>
</table>

Answer 2

[class="abc xyz"], [class="xyz abc"] { … }