Menu
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/
711
Definition and Usage. The :nth-child(n) selector matches every element that is the nth child of its parent. n can be a number, a keyword (odd or even), or a formula (like an + b). Tip: Look at the :nth-of-type() selector to select the element that is the nth child, of the same type (tag name), of its parent.
In CSS, to exclude a particular class, we can use the pseudo-class :not selector also known as negation pseudo-class or not selector. This selector is used to set the style to every element that is not the specified by given selector. Since it is used to prevent a specific items from list of selected items.
When designing and developing web applications, sometimes we need to select all the child elements of an element except the last element. To select all the children of an element except the last child, use :not and :last-child pseudo classes.
jQuery selector is described in the Selectors/nthChild docs, and the above can be accomplished with $("li. mybutton:nth-child(2)"). hide() .
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.
167
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
