// 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

​