Explanation: This CSS selector (nth child) allows you to style elements which match a given condition. We have the ability to work with:
- :nth-child(n)
- :nth-last-child(n)
- :nth-of-type(n)
- :nth-last-of-type(n)
Where (n) represents an integer or the reserved words even or odd. We can also include a more complex expression :nth-child(an + b) where a is the iteration value and b is the starting offset (although b can be positive or negative, stick with positive until you fully understand this concept). It is possible to walk off the list and return no matches with your selector when using negative values.
Example CSS code:
/* CSS-3 specific styles*/
ol li:nth-child(even) {
color:#F00;
}
ul li:nth-child(3n) {
color:#0F0;
}
dd:nth-child(3n+6) {
color:#00F;
font-weight:bold;
}
Examine the linked document below and identify why certain rules apply.
Example page (view the source code): http://learning-html5.info/CSS3/CSS3_nthChildSelector.html (should work in most modern browsers).
References:
- lynda.com tutorials
Loading ...