---
title: "ref() conditions"
description: "Style an element while an ancestor with a ref exists or matches variants such as hover."
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.

# ref() conditions

Calling a ref creates a condition on the ref element. `card()` matches inside the
element that has the `card` ref. `card("hover")` matches there while that element
is hovered.

## Example

### Source

```tsx
import { style } from "stillwind/react";

const card = style.ref("card");
export const container = style(card, "rounded-lg p-4");
export const title = style({ [card("hover")]: "text-blue-600" });
```

### Compiled code

```ts
const card = undefined;
export const container = {className:"sw_vw9g3 sw_card_uryy0"};
export const title = {className:"sw_c67by"};
```

### Generated CSS


```css
.sw_vw9g3 {
  padding: calc(var(--spacing) * 4);
  border-radius: var(--radius-lg);
}

@media (hover: hover) {
  .sw_c67by:is(:where(.sw_card_uryy0):hover *) {
    color: var(--color-blue-600);
  }
}
```

## Inputs

| Form                   | Matches                                               |
| ---------------------- | ----------------------------------------------------- |
| `card()`               | Inside the ref element                                |
| `card("hover")`        | Inside the ref element while it matches the variant   |
| `card("hover:active")` | Inside the ref element while it matches every variant |
| ``card`hover` ``       | The same as `card("hover")`                           |

The argument is a string literal or a tagged template without interpolations.
The final colon is optional.

## Where to write it

Write the condition as a computed key of an object in `style()`:

```ts
style({ [card("hover")]: "text-blue-600" });
```

You can also write it as a variant segment inside a utility template, followed by
`:`:

```ts
style(`${card("hover")}:text-blue-600`);
```

You cannot store the condition in a variable and use it later.

## Behavior

The ref element must be an ancestor of the styled element. To match a sibling or
another element inside a shared ancestor, add [`.in()`](/docs/macros/ref/in).

The condition only selects elements. It does not attach the ref, so attach it with
`style(card)` on the ancestor.

See [Element relationships](/docs/guides/element-relationships#react-to-a-parents-state)
for a task-based example.

Source: https://stillwind.dev/docs/macros/ref/condition/index.mdx