Can :checked and :nth-child() be used Together? - css

Question

I have a list of checkboxes. The user can only select 10. I want to highlight the 11th (and greater) checked checkboxes with CSS to show they have to uncheck some. (I know there are other ways to do this including with JS and I understand the browser limitations; this is an exercise)
Checked checkbox labels are highlighted green, thusly:
li > input:checked + label {
color: green;
}
The 11th and greater checkbox label should be highlighted red:
li > input:checked:nth-child(n+11) + label {
background-color: red;
}
But this does not work. A simple test shows that I at least have the nth-child() syntax correct:
li:nth-child(n+11) {
background-color: red;
}
That works. Is there an issue using it with :checked or the + selector?
Edit: Fleshed out example with HTML
Here is what the HTML could look like:
<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>
Here is a working JS fiddle with all scenarios above: http://jsfiddle.net/eQuEW/1/
In this example the first 12 boxes have been checked. Checked check boxes have green labels. Checkboxes 11 and up have bold text just as an example of what I'm talking about. Check box 11 and 12 should have a red background (but they do not). Then if, for example, the user were to de-select checkbox 1, the red background would no longer be on checkbox 11 as 2-11 represent the first 10 checked checkboxes and 12 represents the first one greater than 10 (and, therefore, in error).

Answer 1

This isn't possible with pure CSS no matter what the DOM structure. The reason is that :nth-child and :nth-of-type will always select the same elements regardless of other selectors. So :nth-child( n+11 ) will always select every select box after the 10th one. Adding another filter like :checked will just filter to all the checked inputs with an index > 10.
You can't filter the results of nth-child because it simply counts the number of previous siblings.
And just for the fun of it, to demonstrate what I mean: http://jsfiddle.net/u4xxA/1/

Answer 2

If i'm understanding you right, your HTML looks something like
<ul>
<li>
<input type="checkbox"...>
<label for="...">...</label>
</li>
<li>
<input type="checkbox"...>
<label for="...">...</label>
</li>
</ul>
If that's the case, you have a problem. See, CSS selectors work from the root down, and can't go in reverse. (Selecting a node based on its children doesn't work.) Add to that, :nth-child (and :nth-of-type, which is what i was originally going to suggest) will select nodes based on their index within the parent, which in this case is the <li> element. (That means there will never be an 11th checked box as long as each one is in its own list item.)
What you'd need is something like
(li:has(input:checked)):nth-of-type(n+11) label {
...
}
But :has and the parentheses doesn't exist in CSS, and from what i hear, it probably never will. You'll need to do this with JS.
(Edit: I had some mention of CSS that would work if you rearranged your HTML...but it turns out it didn't work. Pseudo-classes work independently of each other, so you'd always end up selecting the 11th box if it's checked, rather than the 11th checked box.)

Answer 3

Maybe a bit late to the party, but since all the other answers say it can't be done in CSS alone, here is the solution.
You can only do this if all the checkboxes are in the same container. So not one checkbox per list item. If you want the result to look like a list, you will have to add some more 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>