Css selector target if x elements

Question

Simply I'd like to target one rule if there are 3 divs and another if there are 4 divs.

Markup

//one set of rules
<div></div>
<div></div>
<div></div>

//second fules
<div></div>
<div></div>
<div></div>
<div></div>

CSS

/* three items */
div:nth-child(1):nth-last-child(3),
div:nth-child(2):nth-last-child(2),
div:nth-child(3):nth-last-child(1)

/* fouritems */
div:nth-child(1):nth-last-child(4),
div:nth-child(2):nth-last-child(3),
div:nth-child(3):nth-last-child(2),
div:nth-child(4):nth-last-child(1)

I've followed this: http://lea.verou.me/2011/01/styling-children-based-on-their-number-with-css3/ but not with much luck sadly.

Well, to start, your first set of selectors uses `li`, and your second set of selectors has one that's just `v`. If that's just a typo, you may want to correct it, test it again just to be sure, so that we know you actually tried a valid selector and it still didn't work. — BoltClock, Oct 24 '13 at 08:51
There are also other important points, such as whether these are the only children, or if they are mixed with other elements (show us your actual markup), which browsers you've tested, and so on. — BoltClock, Oct 24 '13 at 08:55
:) these are typeos. the v was meant to be `cntrl-v` Indeed, the real code doesn't actually use the div's — Jamie Hutber, Oct 24 '13 at 08:58
Your code should work, providing the conditions @BoltClock mentions are met. You should provide a Fiddle demonstrating your problem. — Niels Keurentjes, Oct 24 '13 at 08:58
You'll want to show your actual code then. Selectors such as `:nth-child()`/`:nth-last-child()` are extremely context-sensitive so it helps to be as precise as possible. — BoltClock, Oct 24 '13 at 09:01
Are the `div's` going to appear together? or just only one condition will be match? (3 div, 4 div)... I suggest wrapping those `div` in another to have more control over them. If you give us a fiddle example we can try to fix it, but with only that, just apears that you can't follow @lea.verou tutorial. Also, take a look here: [can CSS detect the number of children an element has?](http://stackoverflow.com/questions/8720931/can-css-detect-the-number-of-children-an-element-has) — gmo, Oct 24 '13 at 09:01
Putting together a fiddle for you hungry lot :) But the actual code was written in SASS. Still give me a few — Jamie Hutber, Oct 24 '13 at 09:05
Can't be that hard, [made this in 30 seconds demonstrating that the concept works](http://jsfiddle.net/Curry/NegPp/1/) ;) — Niels Keurentjes, Oct 24 '13 at 09:18
@Niels Keurentjes: Well... have you considered that the actual markup he's working with might be an order of magnitude more complex than what you threw together in 30 seconds? ;) — BoltClock, Oct 24 '13 at 09:21
@BoltClock thats for the support :) This is true, moreover I'm at work as well :) http://jsfiddle.net/7ggza/3/ this is my fiddle. The point of the simple example in the question is I feel this will teach others more easily than my complex very specific code. I'm a believer of teaching others wherever possible :) — Jamie Hutber, Oct 24 '13 at 09:31
That's true. However there's the possibility you simplify your example too much that in doing so the actual problem gets erased by accident. Now that you have your fiddle I've spotted the problem and will write an answer - but it'd be useful to update your question to better reflect your fiddle since the answer pretty much depends on it. Sorry for dragging this on by the way :) — BoltClock, Oct 24 '13 at 09:39
@BoltClock as said, I was just demonstrating that **the concept** works ;) — Niels Keurentjes, Oct 24 '13 at 12:09

score 1 · Accepted Answer · answered Oct 24 '13 at 09:41

In your fiddle, the following selector:

.stepNav li span:nth-child(1):nth-last-child(4), 
.stepNav li span:nth-child(2):nth-last-child(3), 
.stepNav li span:nth-child(3):nth-last-child(2), 
.stepNav li span:nth-child(4):nth-last-child(1)

Matches all span elements when there are exactly 4 of them in the same parent. But you only have one span per li, making each span the only child, not one of four.

What you're looking to do is to style the span elements when there are exactly 4 li elements, so you need to move the pseudo-classes over:

.stepNav li:nth-child(1):nth-last-child(4) span, 
.stepNav li:nth-child(2):nth-last-child(3) span, 
.stepNav li:nth-child(3):nth-last-child(2) span, 
.stepNav li:nth-child(4):nth-last-child(1) span

Updated fiddle, where you can see all the spans are now shaded black.

arghh genius!!!! its so obvious :( I think you sir. Tricky one, as i still think that the original question will get more people in to the question. I think i'll update the question to include both. — Jamie Hutber, Oct 24 '13 at 09:50

Css selector target if x elements

1 Answers1