CSS :interest-invoker and :interest-target Pseudo-Classes

CSS is getting new pseudo-classes that let you style elements based on user interest. The :interest-invoker 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.

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-invoker 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-invoker {
  background-color: lightblue;
}

/* Style the target when its invoker has interest */
:interest-target {
  border-color: blue;
  background-color: lightblue;
}

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:

1
/* Style the button when showing interest */
2
:interest-invoker {
3
  background-color: lightblue;
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-invoker {
  background-color: white;
  color: black;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

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-invoker {
  border-color: blue;
  ring: 2px solid rgba(0,0,255,0.2);
}

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

Browser Support and Fallbacks

These pseudo-classes are newly accepted by the CSS Working Group (July 2025) and have no browser implementations yet. 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.

You can detect support using CSS @supports:

1
@supports selector(:interest-invoker) {
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-invoker and :interest-target proposal in July 2025, marking a significant step toward declarative interactive UI in CSS. Browser implementations will take time, but the Open UI initiative is actively working to standardize these patterns.

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.