Противоположный селектор: not (.classA, .classB, .classC) для селектора (X и (A или B или C))

Question

Учитывая динамически генерируемый список классов:

let dynamicClassList = ".classA, .classB, .classC"; // Contains 0 to N classes

Используя селектор :not(), я легко могу создать отрицательный селектор classX && !(classA || classB || classC), например:

$(".classX:not(" + dynamicClassList + ")");

Но я не могу понять, как создать положительный селектор classX && (classA || classB || classC), так как селектор matches() пока не совместим с браузерами :

$(".classX:matches(" + dynamicClassList + ")");

Кто-нибудь знает способ создания этого быстрого селектора аналогичным образом, используя not() без необходимости использования циклов и ifs?

Answer 1

Вы можете преобразовать селектор classX && (classA || classB || classC) в (classX && classA) || (classX && classB) || (classX && classC)

Какой следующий селектор CSS:

.classX.classA, .classX.classB, .classX.classC {}

Затем вы можете рассмотреть небольшой JS-код для добавления .classX для создания селектора:

let dynamicClassList = ".classA, .classB, .classC";

let selector = dynamicClassList.replace(/,/gi, '.classX, ');
selector=selector+'.classX';

$(selector).css('color','red');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="classA classX">some text</div>
<div class="classB">some text</div>
<div class="classX classB">some text</div>
<div class="classX classB classA">some text</div>
<div class="classB classA">some text</div>
<div class="classX">some text</div>