Excluding an item from nth-child pattern

Question

Let's say I have these elements:

<li class="class1">content</li> <li class="class1">content</li> <li class="class1 class2">content</li> <li class="class1">content</li> <li class="class1">content</li> <!-- I want nth-child(4n) to select this--> <li class="class1">content</li> <li class="class1">content</li> <li class="class1">content</li> 

I want to use .class1:nth-child(4n) to select every 4th element, but if the element has BOTH class1 and class2 , I don’t want it to be included in the "every fourth" count - I just want it ignored.

I tried .class1:not(.class2):nth-child(4n) , but it does not work. Any ideas?

Here's the JSFiddle for experimenting: http://jsfiddle.net/jWxb6/2/

Answer 1

Selector

nth-child just counts all the child nodes, so .class1:nth-child(4) means 'element, which is the 4th child element of the container and has class1 class', not the 4th element with this class in the container. The nth-of-type selector can only select elements of a certain type (tag name), so you can, for example, read dt elements separately from dd elements in the dl list. There is nth-child(4 of .class1) in CSS Selectors 4 , but is currently only supported in recent versions of Safari.

With CSS supported by most browsers, you can “reset the counter” after the element you want to exclude from the count, and “start a new counter” for the rest of the list:

 .class1:nth-child(4n) { list-style-type: circle; } .class1.class2, .class2 ~ .class1:nth-child(4n) { list-style-type: disc; } .class2 ~ .class1:nth-child(4n + 1) { list-style-type: circle; } 

etc. (see updated script ).

Alternatively, you can change the markup and use different tags instead of classes and nth-of-type .

Answer 2

What you want to achieve is not possible with pure css as far as I know. (I would be happy if I were mistaken.). However, you can accomplish what you want just using jQuery. Here is a working example:

http://jsbin.com/fumeq/2/

Answer 3

another approach is to add elements as hidden elements that you need. Referring to your jsfiddle, this means that you can solve the problem as follows:

 .hide{ display:none; } .class2 { background-color: blue; color: white; } .class1:nth-child(4n):not(.class2) { border: 1px solid red; } <ul> <li class="class1">content</li> <li class="class1">content</li> <li class="hide">helper</li> <li class="hide">helper</li> <li class="hide">helper</li> <li class="class1 class2">content</li> <li class="class1">content</li> <li class="class1">content</li> <li class="class1">content</li> <li class="class1">content</li> <li class="class1">content</li> </ul> 

Answer 4

Not a direct answer, but will it work if you just override the previous CSS style, i.e.?

 .class1:nth-child(4n) { color: red; } .class2 { color: inherit !important; } 

Answer 5

Based on what I understood, you want to select (and style) every fourth element in this list. BUT, if any of these selected elements has an additional class (with the name "class2" or, for that matter, any class name) attached to it, then you do not want to apply any style to it.

You can do this with pure CSS. Instead of using the following CSS selector:

 .class1:not(.class2):nth-child(4n) { color: Blue; } 

you can use:

 li[class="class1"]:nth-child(4n) { color:Orange; } 

See this script: http://jsfiddle.net/kLpb5/

Hope this solves your problem.