CSS :interest-source and :interest-target 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, MDN). Firefox and Safari don’t support them yet, so keep the @supports fallback below. The pseudo-classes now live in Selectors Level 5, 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).

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

/* Style the target when its invoker has interest */
:interest-target {
  border-color: var(--fg);
  background-color: var(--tint);
  color: var(--fg);
}

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:

1
<button interestfor="tooltip-1">Hover me</button>
2
<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:

1
/* Style the button when showing interest */
2
:interest-source {
3
  background-color: var(--tint);
4
}
5

6
/* Style the tooltip when its invoker has interest */
7
:interest-target {
8
  opacity: 1;
9
  visibility: visible;
10
}

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.

/* Show tooltip when its invoker has interest */
:interest-target {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

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.

/* Highlight nav item when it has interest */
:interest-source {
  background-color: var(--tint);
  color: var(--fg);
}

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.

/* Highlight input when focused */
:interest-source {
  border-color: var(--fg);
  box-shadow: 0 0 0 2px color-mix(in oklch, var(--fg) 20%, transparent);
}

/* Style helper text when input has interest */
:interest-target {
  color: var(--fg);
  transform: translateY(0);
}

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:

1
@supports selector(:interest-source) {
2
  /* Your interest pseudo-class styles */
3
}

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.