Examples of CSS-3 nth Child Selectors

Don't forget to view the source code. To better help with your understanding of nth child selectors, I am using lists and paragraphs on this page. I am employng inline styles as I want to work with multiple lists to show various effects.

Example - nth child (even) targeted in a list.

  1. Text to display.
  2. Text to display.
  3. Text to display.
  4. Text to display.
  5. Text to display.
  6. Text to display.
  7. Text to display.

Example - nth child (3n) targeted in a list.

Example - nth child (3n+6) targeted in dl.

Definition List
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item

Some items. I want to only highlight the 4, 5, 6, and 7 in this list. Used li:nth-child(1n+4):nth-last-child(1n+8).