Cascade & overrides

All of Pretable's grid styling lives in a single cascade layer named pretable, and every default selector is wrapped in :where() so it carries zero specificity. Together these mean your styles win — by layer order, by specificity, or both — without !important or specificity tricks.

Three ways to override, in increasing power

1. Tokens — set any --pretable-* variable at :root or a scoped selector. This is the blessed path for recoloring and resizing. Override after importing the theme file. See Override tokens.

2. Deep CSS — write a selector targeting any grid part. Because the defaults are specificity (0,0,0), even a single class wins:

   Copy

   .my-grid [data-pretable-cell][data-pretable-selected="true"] { background: hotpink; }

3. Layer order — because all Pretable CSS is in @layer pretable, anything unlayered or in a later layer wins regardless of specificity.

Declare the layer order (Tailwind / reset users)

If you use cascade layers — including Tailwind v4, which layers Preflight in base — declare the order once so the cascade is predictable:

• pretable is after base, so a reset (Tailwind Preflight, normalize.css in base) cannot clobber the grid's borders and padding.
• pretable is before utilities, so a utility class like class="bg-red-500" on a cell still wins.

If you don't use layers at all, you need none of this — plain unlayered CSS beats every layer automatically.

Put resets in @layer base. A normalize.css imported unlayered would beat the grid (unlayered beats all layers) and could strip its styling.

Worked examples

Recolor the selected cell

Restyle the header

Thicker resize handle

Each of these is a plain selector with no !important — they win because the grid's defaults are layered and specificity-(0,0,0).

Targeting attributes

Pretable emits a stable set of data-pretable-* attributes you can target with CSS:

For example, style one column (header and body) and the selected cells in another:

These names are stable; aria-* and role are also targetable but follow ARIA semantics, not Pretable's namespace.