// jade: compressed

mixin example(code)
  figcaption
    code= code
  figure&attributes(attributes)
    - for (var x = 0; x < 25; x++)
      i.fa.fa-circle
  br
  br

// Output HTML

h1.title :nth-child

main
  code :nth-child
  |  is a CSS3 selector, geared towards selecting children of an element depending on criteria.
  br
  br
  | What does that mean? In a nutshell, it means we can style elements depending on where they are in the DOM. This is great for selecting ranges of elements, or every "x" amount of elements!
  br
  br
  | In CSS, this looks like:
  pre
    | parent :nth-child( expression ) {
    |   *CSS*
    | }
  br
  br
  
  | Let's get down to some practical applications.
  br
  br
  hr
  | Styling a single element:
  +example( ":nth-child(9)" ).ex1
  
  | Styling above a certain element:
  +example( ":nth-child(n + 5)" ).ex2
  
  | Styling below a certain element:
  +example( ":nth-child(-n + 5)" ).ex3
  
  | Styling a range of elements:
  +example( ":nth-child(n + 10):nth-child(-n + 20)").ex4
  
  | Styling odd elements:
  +example( ":nth-child(odd)" ).ex5
  
  | Styling every x elements:
  +example( ":nth-child(5n + 1)").ex6
  
  | Style every odd element in a range:
  +example( ":nth-child(odd):nth-child(n + 10):nth-child(-n + 20)").ex7
  
  hr
  
  | As you can see, nth-child has some powerful applications. But remember, as always, with great power comes great responsibility; these selectors can be slow if applied too liberally!
  br
  br
  | Browser Campatability is pretty excellent; everything except IE8 has full support for the selector. 
  a(href="http://caniuse.com/#search=nth-child") Can-I-Use