I know a bunch of the pseudo classes (first-child, last-child, nth-child) but I am having trouble selecting the first 2 children in a list or the last 2, the list is dynamic and changes all the time so i cant target based on counting the li's
<ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>
The CSS child selector has two selectors separated by a > symbol. The first selector indicates the parent element. The second selector indicates the child element CSS will style.
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.
For the first two children you can use:
ul li:nth-child(-n + 2) { color: orange; }
http://jsfiddle.net/nYnSz/1/
For the last two:
ul li:nth-last-child(-n + 2) { color: orange; }
http://jsfiddle.net/nYnSz/
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