CSS целевой элемент с классом больше чем n независимо от других классов

Question

Ссылка: Селектор CSS для соответствия классу с номером больше

У меня есть элемент, который создается динамически с атрибутом-flag-n класса, где n равно 0+. Что мне нужно сделать, это спрятать все элементы, которые имеют 3 или более флагов из поля зрения. У некоторых предметов есть вторичный класс, который хотя и не конфликтует с CSS, но нарушает целевое назначение.

<!-- Show this -->
<li class="attribute-flagged-2">...</li>
<!-- Hide this -->
<li class="attribute-flagged-5">...</li>
<!-- Hide this -->
<li class="for-review attribute-flagged-7">...</li>

Кажется, я не могу понять, что заставляет этот другой класс мешать целевому. ссылка.

JS-Fiddle

Answer 1

Причина, по которой он не совпадает, связана с [class^="attribute-flagged-"], поскольку иногда интересующий вас класс не является первым в списке классов. Это сработало бы, если бы вы использовали [class*="attribute-flagged-"] вместо этого. Однако я предлагаю более конкретный подход, чтобы он не сломался, если бы другие классы содержали любую из этих 3 цифр:

[class*="attribute-flagged-"]:not(.attribute-flagged-0):not(.attribute-flagged-1):not(.attribute-flagged-2) {
  display: none;
}