Menu
Is it possible to select multiple children past a defined number with CSS selectors?
I'd like to hide all list items past #3:
<ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <!-- hide this --> <li>5</li> <!-- hide this --> </ul> <style> ul li:nth-child(X) { display: none; } </style>
532
jQuery selector is described in the Selectors/nthChild docs, and the above can be accomplished with $("li. mybutton:nth-child(2)"). hide() .
Definition and UsageThe :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.
formula (an + b)nth-child(3n) would affect every third child element. nth-child(3n+1) would apply to every third element starting from the first one. Multiplication and division are not supported in nth-child(n) formulas.
The :nth-last-child(n) selector matches every element that is the nth child, regardless of type, of its parent, counting from the last child.
I do not know which browser supports this, but you can pass a formula to :nth-of-type():
ul li:nth-of-type(1n+4) {display: none;} /* should match your case */ Further details on: http://www.w3schools.com/cssref/sel_nth-of-type.asp
Edit
I altered it from (n+4) to (1n+4) since the first version works but isn't valid. I use this in media queries to hide cut-down items on smaller screens.
b:nth-of-type(1n+4){ opacity:.3; }<b>1</b> <b>2</b> <b>3</b> <b>4</b> <b>5</b>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
