css-doodle

Create

Selector

@nth

Cells by index, counted from 1 in reading order, like :nth-child().

Syntax

  • @nth(<n>, ...) { }
  • @nth not (<n>) { }
n
An index, an an+b formula such as 3n + 1, or the keyword odd or even. Several arguments match any of them.

odd and even are index parity, not the checkerboard of @even.

Examples

@grid: 5x5 / 60vmin _1px;
@content: @i;

@nth(5) {
  @shape: hexagon;
  background: #000;
  color: #fff;
}

@nth(3n + 8) {
  background: #000;
  color: #fff;
}

@nth(1, 2) {
  background: #e6437d;
  color: #fff;
}
Open in playground

The block is filled in for each cell that @nth picks, so the values inside can differ from cell to cell. Here @i gives every second cell its own hue: 

@grid: 5x5 / 60vmin _1px;
background: #eee;

@nth(2n) {
  background: hsl(@i(*14), 78%, 62%);
}
Open in playground

The :nth-child() selector

The same cells can be picked with a plain :nth-child() selector. It is kept as CSS and matched by the browser, so on a plain grid it picks the same cells and draws the same picture: 

@grid: 5x5 / 60vmin _1px;
background: #eee;

:nth-child(2n) {
  background: hsl(@i(*14), 78%, 62%);
}
Open in playground

See also