Можно ли использовать: checked и: nth-child () вместе?

Question

У меня есть список флажков. Пользователь может выбрать только 10. Я хочу выделить 11 (и более) отмеченные флажки с помощью CSS , чтобы показать, что они должны снять некоторые из них. (Я знаю, что есть другие способы сделать это, включая JS, и я понимаю ограничения браузера; это упражнение )

Установленные флажки отмечены зеленым цветом, таким образом:

li > input:checked + label {
  color: green;
}

Метка флажка 11-й и более должна быть выделена красным:

li > input:checked:nth-child(n+11) + label {
  background-color: red;
}

Но это не работает. Простой тест показывает, что у меня хотя бы правильный синтаксис nth-child ():

li:nth-child(n+11) {
  background-color: red;
}

Это работает. Есть ли проблема при использовании его с :checked или селектором +?

Редактировать: выделенный пример с HTML

Вот как HTML может выглядеть:

<form action="#" method="get">
    <ul>
        <li><input type="checkbox" id="checks1" name="checks"> <label for="checks3">Test 1</label></li>
        <li><input type="checkbox" id="checks2" name="checks"> <label for="checks3">Test 2</label></li>
        <li><input type="checkbox" id="checks3" name="checks"> <label for="checks3">Test 3</label></li>
        <!-- etc -->
    </ul>
</form>

Вот рабочая скрипка JS со всеми сценариями выше: http://jsfiddle.net/eQuEW/1/

В этом примере первые 12 полей были отмечены. Установленные флажки имеют зеленые метки. Флажки 11 и выше содержат текст полужирный как пример того, о чем я говорю. Флажки 11 и 12 должны иметь красный фон (но их нет). Затем, если, например, пользователь должен снять флажок 1, красный фон больше не будет находиться на флажке 11, так как 2-11 представляют первые 10 флажок флажков, а 12 представляет первый, больше чем 10 (и, следовательно, по ошибке).

Answer 1

Это невозможно с чистым CSS независимо от структуры DOM. Причина в том, что :nth-child и :nth-of-type всегда будут выбирать одни и те же элементы независимо от других селекторов. Поэтому :nth-child( n+11 ) всегда будет выбирать каждые поле выбора после 10-го. Добавление другого фильтра, такого как :checked, просто отфильтрует все проверенные входы с индексом> 10.

Вы не можете отфильтровать результаты nth-child, потому что он просто подсчитывает количество предыдущих братьев и сестер.

И просто для удовольствия, чтобы продемонстрировать, что я имею в виду: http://jsfiddle.net/u4xxA/1/

Answer 2

Если я вас правильно понимаю, ваш HTML выглядит примерно так:

<ul>
 <li>
  <input type="checkbox"...>
  <label for="...">...</label>
 </li>
 <li>
  <input type="checkbox"...>
  <label for="...">...</label>
 </li>
</ul>

Если это так, у вас есть проблема.Видите, CSS-селекторы работают от корня вниз и не могут идти наоборот.(Выбор узла на основе его дочерних элементов не работает.) Добавьте к этому, :nth-child (и :nth-of-type, что я и собирался изначально предложить) будет выбирать узлы на основе их индекса в родительском элементе, который вэтот случай - элемент <li>.(Это означает, что 11-й флажок никогда не будет установлен, если каждый находится в своем собственном элементе списка.)

Вам нужно что-то вроде

(li:has(input:checked)):nth-of-type(n+11) label {
    ...
}

Но :has и скобки не существуют в CSS, и из того, что я слышу, вероятно, никогда не будет.Вам нужно будет сделать это с помощью JS.

(Редактировать: у меня было несколько упоминаний о CSS, который работал бы, если бы вы перестроили свой HTML ... но оказалось, что он не работал. Работа псевдоклассовнезависимо друг от друга, так что вы всегда будете выбирать 11-й блок, если он установлен, а не 11-й флажок.)

Answer 3

Может быть, немного опоздал на вечеринку, но так как все остальные ответы говорят, что это не может быть сделано только в CSS, вот решение.

Это можно сделать только в том случае, если все флажки находятся в одном контейнере. Так что не один флажок на элемент списка. Если вы хотите, чтобы результат выглядел как список, вам придется добавить еще немного CSS.

input:checked + label {
  color: green;
}

input:checked ~ input:checked ~ input:checked ~ input:checked
~ input:checked ~ input:checked ~ input:checked ~ input:checked
~ input:checked ~ input:checked ~ input:checked + label {
  color: red;
}


/* Put each checkbox on a different line */
label:not(:last-child)::after {
  content: '\000A';
  white-space: pre;
}

<div class="list">
  <input type="checkbox" id="checks1" name="checks"> <label for="checks1">Test 1</label>
  <input type="checkbox" id="checks2" name="checks"> <label for="checks3">Test 2</label>
  <input type="checkbox" id="checks3" name="checks"> <label for="checks3">Test 3</label>
  <input type="checkbox" id="checks4" name="checks"> <label for="checks4">Test 4</label>
  <input type="checkbox" id="checks5" name="checks"> <label for="checks5">Test 5</label>
  <input type="checkbox" id="checks6" name="checks"> <label for="checks6">Test 6</label>
  <input type="checkbox" id="checks7" name="checks"> <label for="checks7">Test 7</label>
  <input type="checkbox" id="checks8" name="checks"> <label for="checks8">Test 8</label>
  <input type="checkbox" id="checks9" name="checks"> <label for="checks9">Test 9</label>
  <input type="checkbox" id="checks10" name="checks"> <label for="checks10">Test 10</label>
  <input type="checkbox" id="checks11" name="checks"> <label for="checks11">Test 11</label>
  <input type="checkbox" id="checks12" name="checks"> <label for="checks12">Test 12</label>
  <input type="checkbox" id="checks13" name="checks"> <label for="checks13">Test 13</label>
  <input type="checkbox" id="checks14" name="checks"> <label for="checks14">Test 14</label>
  <input type="checkbox" id="checks15" name="checks"> <label for="checks15">Test 15</label>
  <input type="checkbox" id="checks16" name="checks"> <label for="checks16">Test 16</label>
  <input type="checkbox" id="checks17" name="checks"> <label for="checks17">Test 17</label>
  <input type="checkbox" id="checks18" name="checks"> <label for="checks18">Test 18</label>
  <input type="checkbox" id="checks19" name="checks"> <label for="checks19">Test 19</label>
  <input type="checkbox" id="checks20" name="checks"> <label for="checks20">Test 20</label>
</div>