Menu
I'm playing around with nth-child selector.
Say I have grid with rows of 4 elements each and my first and last element have classes of ui-first-child and ui-last-child respectively:
<ul>
<li.ui-first-child>
<li>
<li>
<li.ui-last-child>
</ul>
What I would like to do is select the first element ONLY if there are more than 4 elements using pure CSS.
So if there are five elements like this:
<el.first><el><el><el>
<el.last>
I want to override bottom-corners on the first element.
Question:
Is it possible with pure CSS/nth-child/first/last class to select the first element on a group of elements with number of elements > 4?
Thanks!
502
The :first-of-type selector in CSS allows you to target the first occurence of an element within its container. It is defined in the CSS Selectors Level 3 spec as a “structural pseudo-class”, meaning it is used to style content based on its relationship with parent and sibling content.
The CSS id Selector The id selector uses the id attribute of an HTML element to select a specific element. The id of an element is unique within a page, so the id selector is used to select one unique element! To select an element with a specific id, write a hash (#) character, followed by the id of the element.
You start with -n, plus the positive number of elements you want to select. For example, li:nth-child(-n+2) will select the first 2 li elements.
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.
I waited for half an hour so that maybe someone would find the answer, but this is the only thing I came up with, and it's problem is that it doesn't work for a "> n", but it works for a "= n". i.e it works only for a specific number, so it's half way what you asked for
li:first-child:nth-last-child(4) {
/* Whatever here */
}
http://jsfiddle.net/g3PDw/
EDIT: Dude I nailed it. This one works perfectly http://jsfiddle.net/g3PDw/9/
li:first-child:nth-last-child(n+5)
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
