Create

Selector

@cell

One selector for every way of picking cells: by index, by expression, or at random. It covers what @nth, @at, @row, @col, @even, @odd, @random and @match do.

Syntax

  • @cell(<index>, ...) { }
  • @cell(<expression>, ...) { }
  • @cell(random [ratio | count]) { }
  • @cell not (...) { }
  • @cell { }
index
A number, an an+b formula, or odd / even. The keywords select a checkerboard, like @even and @odd; use i % 2 = 0 for index parity.
expression
An expression over x, y, i, dr and the other cell variables, and custom properties without their --. The cell matches when it is true.
random
The keyword alone picks each cell with probability .5. Follow it with a ratio below 1, or a count of cells to pick, as in @random.

Several arguments are combined with or. The not keyword before the parentheses inverts the result. Each random argument picks its own cells, so @cell(random 3, random 2) matches up to five. With no arguments every cell matches, which is handy for grouping rules. A pseudo right after it applies to the matched cells, as in @cell(x = y)::after (Nesting & pseudo).

Examples

By index, or several indexes at once:

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

@cell(1, 2, 3n) {
  background: #000;
  color: #fff;
}
Open in playground

By column, row, or a point:

@grid: 5x5 / 60vmin _1px;
@content: @x, @y;

@cell(x = 2, y = 3) {
  background: #000;
  color: #fff;
}
@cell(x = 4 && y = 4) {
  background: #e6437d;
  color: #fff;
}
Open in playground

By an expression over the cell variables. dr is the distance from the centre:

@grid: 15 / 60vmin;
@cell(dr < 3) {
  background: #000;
}
@cell(dr > 5 && dr < 6) {
  background: #e6437d;
}
Open in playground

At random, here exactly three cells:

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

@cell(random 3) {
  background: #000;
  color: #fff;
}
Open in playground

Invert with not:

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

@cell not (2n, x = 1) {
  background: #000;
  color: #fff;
}
Open in playground

See also