Таргетинг на первого ребенка в родителе, у которого нет определенного класса

Question

Заголовок довольно полный, но это именно то, чего я пытаюсь достичь. Мне нужно нацелиться на первый экземпляр, где класс отсутствует - в этом случае я пытаюсь скрыть диапазон в # 3. Это должно быть динамичным, хотя это не всегда будет # 3. Я пытался стать хитрым с :not и :nth-of-type, но это ужасно неправильно.

 <style>
   li:not(.done):nth-of-type(1).span.divider {display:none}
 </style>

 <-- 1 -->
 <li class="wrapper done"><span class="divider"></span></li>
 <-- 2 -->
 <li class="wrapper done"><span class="divider"></span></li>
 <-- 3 - hide this span -->
 <li class="wrapper"><span class="divider"></span></li>
 <-- 4 -->
 <li class="wrapper"><span class="divider"></span></li>
 <-- 5 -->
 <li class="wrapper"><span class="divider"></span></li>

Answer 1

Если это всегда будет после элемента с классом .done, тогда это должно работать: li.done + li:not(.done) .divider { display:none; }

Answer 2

Мой подход к проблеме заключается в использовании двух отдельных правил; один для стиля всех элементов, для которых отсутствует заданное имя класса, и другой для переопределения всех элементов, для которых отсутствует указанное имя класса, которые следуют за элементом, для которого отсутствует имя класса:

/* Selects all <li> elements with the 'wrapper'
   class-name that does not have the 'done' class: */
li.wrapper:not(.done) {
  color: limegreen;
}

/* Selects all elements, as above, that follow an
   element without the 'done' class-name; effectively
   we style the first occurrence using the above rule
   because the first occurrence - obviously - cannot
   be a general (later) sibling of a matching element: */
li.wrapper:not(.done)~li.wrapper:not(.done) {
  color: red;
}

*,
 ::before,
 ::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

ul {
  display: flex;
  flex-wrap: wrap;
  list-style-type: none;
  width: 95vw;
  margin: 0 auto;
}

li {
  flex: 1 1 150px;
  margin: 0.2em;
  height: 10vh;
  text-align: center;
  line-height: 10vh;
  border: 1px solid #000;
}

li.wrapper:not(.done) {
  color: limegreen;
}

li.wrapper:not(.done)~li.wrapper:not(.done) {
  color: red;
}

<ul>
  <li class="wrapper done">&lt;li&gt;: 1</li>
  <li class="wrapper done">&lt;li&gt;: 2</li>
  <li class="wrapper done">&lt;li&gt;: 3</li>
  <li class="wrapper">&lt;li&gt;: 4</li>
  <li class="wrapper">&lt;li&gt;: 5</li>
  <li class="wrapper">&lt;li&gt;: 6</li>
  <li class="wrapper">&lt;li&gt;: 7</li>
  <li class="wrapper">&lt;li&gt;: 8</li>
  <li class="wrapper">&lt;li&gt;: 9</li>
  <li class="wrapper">&lt;li&gt;: 10</li>
</ul>

Ссылки:

• Оператор отрицания (:not()) .
• Общий брат (~) комбинатор .

Answer 3

Я думаю, вам нужно использовать два селектора для этого:

/*hide all the element after .done selector without done*/
li.done ~ li:not(.done) {
  display:none;
}

/*show all the element after the first one without .done*/
li.done ~ li:not(.done) ~ li {
  display:list-item;
}

<ul>
  <!-- 1 -->
  <li class="wrapper done"><span class="divider">1</span></li>
  <!-- 2 -->
  <li class="wrapper done"><span class="divider">2</span></li>
  <!-- 3 - hide this span -->
  <li class="wrapper"><span class="divider">3</span></li>
  <!-- 4 -->
  <li class="wrapper"><span class="divider">4</span></li>
  <!-- 5 -->
  <li class="wrapper"><span class="divider">5</span></li>
</ul>