Excluding an element from nth-child pattern

问题:

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 a .class1:nth-child(4n) to select every 4th element, but if an element has BOTH class1 and class2 I don't want it to be included in the "every 4th" counting--I just want it to be ignored.

I've tried .class1:not(.class2):nth-child(4n), but it doesn't seem to work. Any ideas?

Here's a JSFiddle for experimentation: http://jsfiddle.net/jWxb6/2/

回答1:

nth-child selector just counts any child nodes, so .class1:nth-child(4) means 'element that is the 4th child of the container and has class1 class', not 'the 4th element with that class in the container'. The nth-of-type selector can select only elements of the specific type (tag name), so you can, e.g., count dt elements separately from dd elements in a dl list. There is nth-child(4 of .class1) syntax in CSS Selectors 4 draft, but it's currently supported only in the latest versions of Safari.

With the CSS supported by most browsers, you can 'reset the counter' after the element you want to exclude from counting and 'start the new counter' for the remaining part 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;
}

and so on (see updated fiddle).

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

回答2:

What you want to accomplish is not possible with pure css in my knowledge. (I'd be happy if I'd be proven wrong.). However, you can accomplish what you want simply with jQuery. Here's a working example:

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

回答3:

another approach is - add the elements as hidden elements you additionally need. Referring to your jsfiddle, that means you could solve the problem like this:

.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>

回答4:

Not a direct answer, but would it work if you just overrode the previous CSS styling, i.e. ?

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

回答5:

Based on what I have understood, you want to select(and style) every fourth element in this listing. BUT if any of these selected elements have an additional class (named 'class2' or for that matter, whatever class name) attached to it, then you don't want to apply any styling onto it.

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

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

you could use:

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

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

I hope this solves your problem.