css-doodle

Create

Selector

Nesting & pseudo selectors

Plain CSS selectors nest inside the cell rules. A pseudo-class or pseudo-element attaches to the cell, anything else selects a descendant, and & stands for the cell itself.

Syntax

WrittenResolves toRule
:hover { }&:hoverA selector that starts with : is appended to the cell.
::after { }&::after
span { }& spanAny other selector becomes a descendant.
.dark & { }.dark &Each & is replaced by the outer selector.

Blocks nest to any depth, and cell selectors like @cell can appear inside a selector block and the other way round. Rules for :doodle and :container are never nested under a cell, wherever they are written.

Examples

Hover state of a cell:

@grid: 6 / 60vmin _2px;
background: #000;
transition: .3s;

:hover {
  background: #e6437d;
  scale: 1.2;
  z-index: 1;
}
Open in playground

Pseudo-elements, with the cell functions available inside:

@grid: 5 / 60vmin _1px;
background: #000;

::after {
  content: '';
  @size: @r(20%, 80%);
  background: @p(#fff, #e6437d, #ebbf4d);
  border-radius: 50%;
}
Open in playground

Descendants, useful with @content:

@grid: 3 / 60vmin _1px;
@content: @raw(<i>@i</i>);
background: #000;

i {
  color: #fff;
  font-style: normal;
  font-size: 2em;
}
Open in playground

Combining a cell selector and a state:

@grid: 7 / 60vmin _1px;
background: #000;
transition: .2s;

@cell(x = y) {
  background: #e6437d;
  :hover {
    background: #ebbf4d;
  }
}
Open in playground

See also