---
title: "repeated-nesting-selector"
description: "Reports a selector that repeats & to relate two elements, such as [&+&]."
image: "https://stillwind.dev/og.png"
---

> Documentation Index
> Fetch the complete documentation index at: https://stillwind.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# repeated-nesting-selector

This rule reports a selector variant that repeats `&`, such as `[&+&]:`, to relate
two elements. `&` stands for the generated class of the style, so the selector
matches any two elements that share the style. When the style is shared or used
as a base, it can match pairs that you did not mean.

## Reported

```tsx
function Items({ labels }: { labels: string[] }) {
  return (
    <div>
      {labels.map((label) => (
        <div {...style("[&+&]:mt-4")}>{label}</div>
      ))}
    </div>
  );
}
```

> repeated-nesting-selector: `&+&` uses `&` more than once, so it matches by generated class identity; relate elements with style.ref()
> 
> Example:5:25

## Fixed

```tsx
function Items({ labels }: { labels: string[] }) {
  return (
    <div {...style("flex flex-col gap-4")}>
      {labels.map((label) => (
        <div>{label}</div>
      ))}
    </div>
  );
}
```

## How to fix

- To space items in a list, put `gap` on the list, as in the example.
- To style an element from the state of a sibling, use refs with
  [`.in()`](/docs/macros/ref/in).

## Rule settings

| Preset | Severity |
| --- | --- |
| `recommended` | warn |
| `strict` | deny |
| `stylistic` | off |

[Configure lint](/docs/configuration#lint) to change the severity or options.

Source: https://stillwind.dev/docs/lints/repeated-nesting-selector/index.mdx