: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.
  • 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.

Copyright © aleen42 all right reserved,powered by GitbookUpdated time: 2016-10-09 06:25:23