:nth-child() Back

• The :nth-child() is a CSS pseudo-class selector that allows you to select elements based on their index (source order) inside their container.
• You can pass in a positive number as an argument to :nth-child(), which will select the one element whose index inside its parent matches the argument of :nth-child(). For example, li:nth-child(3) will select the list item with an index value 3; that is, it will select the third list item.
• You can also pass in one of two predefined keywords: even and odd.
  • li:nth-child(even) will select all list items with even index numbers (2, 4, 6, 8, etc.)
  • li:nth-child(odd) will select all list items with odd index numbers (1, 3, 5, 7, etc.)
• You can also use a formula (or an equation)
  • li:nth-child(an+b): to divide into a groups and select the bth element of each group.

Case: learning nth-child()

See the Pen XXGbNv by aleen42 (@aleen42) on CodePen.

Note

• Using some tools to help dealing with the calculations for nth-child by visualizing.
  • CSS3 structural pseudo-class selector tester by Lea Verou
  • NTH-TEST – nth-child and nth-of-type tester by Paul Maloney
• There is a pseudo-class selector that has a similar functionality to that of :nth-child(), that selector is the :nth-last-child() selector. :nth-last-child() is similar to :nth-child, except that instead of iterating through the elements from the first one downwards, it starts iterating from the last element up.