---
title: "CSS :interest-source and :interest-target Pseudo-Classes"
description: "Style connected UI with the :interest-source and :interest-target pseudo-classes. Interactive examples of tooltips, forms and navigation without JavaScript."
canonical: "https://www.trevorlasn.com/blog/css-interest-pseudo-classes"
author: "Trevor I. Lasn"
published: "2025-11-12"
last-updated: "2026-11-08"
topics: ["CSS", "HTML"]
---

# CSS :interest-source and :interest-target Pseudo-Classes

Style connected UI with the :interest-source and :interest-target pseudo-classes. Interactive examples of tooltips, forms and navigation without JavaScript.

By Trevor I. Lasn · Published 2025-11-12 · Updated 2026-11-08 · https://www.trevorlasn.com/blog/css-interest-pseudo-classes

CSS is getting new pseudo-classes that let you style elements based on user interest. The `:interest-source` and `:interest-target` pseudo-classes work with the `interestfor` HTML attribute to create relationships between elements, enabling interactive UIs without JavaScript.

These pseudo-classes are part of the Open UI Interest Invokers proposal, recently accepted by the CSS Working Group. They handle scenarios where hovering or focusing one element should affect the styling of another element elsewhere in the DOM.

## Update: Chrome 142 shipped interest invokers

Chrome 142 (October 28, 2025) shipped the `interestfor` attribute, `:interest-source`, `:interest-target` and the `interest-delay` properties with no flag ([Chrome Platform Status](https://chromestatus.com/feature/4530756656562176), [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:interest-source)). Firefox and Safari don't support them yet, so keep the `@supports` fallback below. The pseudo-classes now live in [Selectors Level 5](https://drafts.csswg.org/selectors-5/#interest-pseudos), and the shipped versions take no `partial` or `total` argument.

Corrected: the form example's CSS set `ring:`, which isn't a CSS property. It now uses `box-shadow`, the property that draws the ring around the focused field.

The interest invoker system has two parts: an invoker element with the `interestfor` attribute, and a target element it references. When a user shows interest in the invoker (by hovering or focusing), both elements can be styled:

- `:interest-source` matches the element with the `interestfor` attribute when it's receiving interest
- `:interest-target` matches the element being referenced when its invoker has interest

Both pseudo-classes support functional syntax with `partial` or `total` parameters. Partial interest means the user has focused the element but hasn't activated it (like hovering), while total interest means full activation (like clicking).

Traditional CSS requires elements to be in specific DOM relationships (parent-child, siblings) to affect each other's styles. Interest invokers break that limitation—any element can invoke interest in any other element via IDREF.

The HTML uses the `interestfor` attribute to establish the connection:

```html
<button interestfor="tooltip-1">Hover me</button>
<div id="tooltip-1">Tooltip content</div>
```

Then CSS can style both the invoker and target. `--tint` and `--fg` are this site's fill and text colors, the ones the demos use:

```css
/* Style the button when showing interest */
:interest-source {
  background-color: var(--tint);
}

/* Style the tooltip when its invoker has interest */
:interest-target {
  opacity: 1;
  visibility: visible;
}
```

One of the most common use cases is creating connected tooltips without JavaScript. When you hover over a button or link, you want to show additional information elsewhere on the page. The interest pseudo-classes make this trivial.

### Navigation Highlighting

Another powerful use case is highlighting navigation items when their corresponding sections are in view or being interacted with. This creates a connected experience where different parts of your interface respond to user attention.

### Form Field Relationships

Forms often have helper text, validation messages, or related inputs that should respond to focus on specific fields. Interest pseudo-classes make these relationships explicit and maintainable.

### Browser Support and Fallbacks

These pseudo-classes were accepted by the CSS Working Group in July 2025. Chrome 139+ has experimental support behind a flag. The proposal is part of the Open UI initiative, not CSS Selectors Level 5. For production use, you'll need JavaScript fallbacks or progressive enhancement until browser support matures.

You can detect support using CSS `@supports`:

```css
@supports selector(:interest-source) {
  /* Your interest pseudo-class styles */
}
```

The examples on this page use JavaScript to simulate the behavior until browsers ship support.

The CSS Working Group accepted the `:interest-source` and `:interest-target` proposal in July 2025, marking a significant step toward declarative interactive UI in CSS. Chrome 139+ already has experimental support, and the Open UI initiative is actively working to standardize these patterns across all browsers.

The proposal also includes plans for additional functionality, like the `interest-delay-start` and `interest-delay-end` CSS properties to control timing, and a potential `possible` parameter (currently deferred) for handling focusability edge cases.