CSS :interest-target Pseudo-Class

CSS :interest-target Pseudo-Class

The CSS :interest-target pseudo-class selects an element that is the target of an active interest invoker. It allows developers to style supplementary content, such as informational popovers, while a user is showing interest in the associated source element.

:interest-target Syntax

selector:interest-target {
  property: value;
}

The :interest-target pseudo-class is added to a selector without a space. It matches an element while that element is the target of an active interest invoker.

Basic Example

[popover]:interest-target {
  border-color: #0088cc;
}

This rule changes the border color of a popover while it is an active interest target.

Class Selector

.info-popover:interest-target {
  background-color: #eaf6fc;
}

This rule applies a light blue background to an active interest target with the info-popover class.

Multiple Properties

.help-content:interest-target {
  border: 2px solid #0088cc;
  background-color: #eaf6fc;
  color: #003366;
}

Multiple CSS properties can be applied while the target is associated with active interest.

How :interest-target Works

The interest invoker mechanism connects a source element to a target element. When the user shows interest in the source, the browser can display the target and apply the appropriate interest pseudo-classes.

HTML Example

<button type="button" interestfor="help-info">Help</button>
<div id="help-info" popover="hint">
  Additional information about this feature.
</div>

CSS Example

#help-info:interest-target {
  border: 2px solid #0088cc;
}

The <div> becomes an interest target when the associated button is actively expressing interest.

The Source and Target Relationship

The source receives the user's interest, while the target contains the related information. The interestfor attribute establishes this relationship.

Automatic State Changes

In supporting browsers, the browser manages the interest state. CSS styles are applied and removed as the target enters and leaves that state.

No JavaScript Required

Native interest invokers can manage interest-triggered popovers without custom JavaScript. JavaScript may still be useful for providing alternative interactions in unsupported browsers.

Interest Targets

An interest target is the element associated with an interest invoker. It commonly contains supplementary information that appears when the user expresses interest in the source.

Informational Popovers

<button type="button" interestfor="info">Information</button>
<div id="info" popover="hint">
  Helpful information about this control.
</div>

The popover provides additional information related to the button.

Styling the Target

[popover] {
  padding: 12px;
  border: 1px solid #ccc;
  background-color: #fff;
}
[popover]:interest-target {
  border-color: #0088cc;
  background-color: #eaf6fc;
}

The first rule establishes the default appearance. The second changes the appearance while the popover is an active interest target.

Target Content

Interest targets are suitable for supplementary descriptions, help information, and contextual previews. Essential information should remain accessible without depending on experimental interest behavior.

Not Every Popover

A popover does not automatically match :interest-target merely because it is open. It must be the target of an active interest invoker.

The interestfor Attribute

The HTML interestfor attribute identifies the element associated with an interest invoker.

HTML Syntax

<button type="button" interestfor="details">Show Details</button>
<div id="details" popover="hint">
  Additional details appear here.
</div>

The value details refers to the target element's id.

Matching IDs

The attribute value must identify the intended target. An incorrect or missing target prevents the expected interest relationship from working.

The popover Attribute

The popover attribute enables browser-managed popover behavior. The hint state is designed for supplementary information that can appear in response to interest.

Target Styling

#details:interest-target {
  border: 2px solid #0088cc;
  background-color: #eaf6fc;
}

The rule applies when the target is associated with active interest.

Different from popovertarget

The popovertarget attribute allows a button to directly control a popover through activation. The interestfor attribute supports interest-based interactions such as hovering or focusing.

:interest-target vs. :interest-source

These pseudo-classes identify opposite ends of an active interest relationship.

Comparison

Styling the Source

button:interest-source {
  background-color: #005580;
  color: #fff;
}

Styling the Target

[popover]:interest-target {
  border-color: #0088cc;
  background-color: #eaf6fc;
}

Both selectors can be used together to provide consistent visual feedback for the invoker and its associated content.

Independent Styling

The source and target remain separate elements. Each can have its own default styles and interest-active styles.

:interest-target vs. :popover-open

The :interest-target and :popover-open pseudo-classes represent different conditions.

Comparison

Open Popover Styling

[popover]:popover-open {
  border: 1px solid #ccc;
}

Interest Target Styling

[popover]:interest-target {
  border-color: #0088cc;
}

Combining Both States

[popover]:popover-open:interest-target {
  background-color: #eaf6fc;
}

This rule applies only when the popover is open and is also an active interest target.

Important Difference

A popover can be open without being an active interest target, such as when it is opened through a standard popovertarget button.

Interest Delays

Interest invokers can use CSS delay properties to control when interest begins and ends.

The interest-delay Property

[interestfor] {
  interest-delay: 0.5s 0.3s;
}

The first value controls the delay before interest starts. The second controls the delay before interest ends.

Starting Delay

[interestfor] {
  interest-delay-start: 0.5s;
}

This property controls how long the browser waits before recognizing interest.

Ending Delay

[interestfor] {
  interest-delay-end: 0.3s;
}

This property controls how long the browser waits before ending interest.

Why Delays Matter

Short delays can reduce accidental popover activation and allow users time to move between related interface elements.

Browser Compatibility

Interest delay properties are experimental. Their availability and behavior depend on browser support.

:interest-target Specificity

The :interest-target pseudo-class contributes a specificity of 0-1-0.

Specificity Examples

Specificity Example

.info-popover {
  background-color: #fff;
}
.info-popover:interest-target {
  background-color: #eaf6fc;
}

When both selectors match and other cascade factors are equal, the second rule takes precedence because it has greater specificity.

Practical Uses

The :interest-target pseudo-class is designed for styling content revealed through interest-based interactions.

Help Information

Highlight explanatory content associated with a help button.

Contextual Popovers

Style supplementary information that appears when users show interest in an interface element.

Feature Descriptions

Provide additional details about controls or interface features without permanently displaying all explanatory text.

Information Previews

Change the appearance of preview content while its source element has active interest.

Coordinated Styling

Use :interest-source and :interest-target together to visually connect the invoker and its associated content.

Limitations

The :interest-target pseudo-class is experimental and should be used with browser compatibility in mind.

Limited Browser Support

Not all browsers recognize the interest invoker mechanism or its associated pseudo-classes.

Requires an Active Interest Relationship

The selector does not match ordinary elements simply because they contain supplementary information.

Not Equivalent to an Open Popover

The :popover-open pseudo-class represents a popover's visibility, while :interest-target represents its relationship to active interest.

Experimental Behavior

The specification and implementation details may change as the feature develops.

Fallback Needed

Important information should remain available through a supported alternative when interest invokers are unavailable.

Accessibility

Interest-triggered information should be available to users regardless of their input device or assistive technology.

Keyboard Accessibility

Use semantic interactive elements and ensure that keyboard users can access supplementary content.

Visible Focus

button:focus-visible {
  outline: 2px solid #005fcc;
  outline-offset: 3px;
}

Provide a visible focus indicator for keyboard navigation.

Touchscreen Access

Do not require hover to access important information. Provide an alternative interaction for devices without convenient hover support.

Readable Content

Ensure that text inside the interest target has sufficient contrast and remains readable at different zoom levels.

Avoid Essential Hover-Only Content

Important instructions and controls should not depend exclusively on experimental interest behavior.

Accessible Labels

Use meaningful labels for interest invokers so users understand what information is available.

Best Practices

• Use :interest-target to style the target of an active interest invoker.
• Connect sources and targets using the interestfor attribute.
• Use :interest-source when the invoker also needs active-state styling.
• Use :popover-open when styling should depend on popover visibility rather than active interest.
• Keep interest-triggered content concise and relevant.
• Provide accessible alternatives for unsupported browsers.
• Maintain readable text contrast and visible keyboard focus indicators.
• Test experimental behavior before using it in production.

:interest-target Example

This example demonstrates a button connected to an informational popover. In supporting browsers, showing interest in the button activates the source and target styles. In unsupported browsers, clicking the button opens the information instead.

HTML

<div class="interest-demo">
  <button type="button" id="info-button" interestfor="info-popover">More Information</button>
  <div id="info-popover" popover="hint">
    This information appears when you show interest in the button.
  </div>
  <p id="support-message"></p>
</div>

CSS

.interest-demo button {
  padding: 10px 15px;
  border: 2px solid #006699;
  background-color: #0088cc;
  color: #fff;
  cursor: pointer;
}
.interest-demo button:interest-source {
  background-color: #005580;
}
.interest-demo button:focus-visible {
  outline: 2px solid #005fcc;
  outline-offset: 3px;
}
.interest-demo [popover] {
  max-width: 250px;
  padding: 12px;
  border: 1px solid #ccc;
  background-color: #fff;
  color: #333;
}
.interest-demo [popover]:interest-target {
  border: 2px solid #0088cc;
  background-color: #eaf6fc;
  color: #003366;
}
.interest-demo #support-message {
  font-size: 0.875rem;
}

JavaScript

const button = document.getElementById("info-button");
const popover = document.getElementById("info-popover");
const message = document.getElementById("support-message");

if (!("interestForElement" in HTMLButtonElement.prototype)) {
  button.textContent = "Toggle Information";
  message.textContent = "Interest invokers are not supported. Click the button instead.";

  button.addEventListener("click", () => {
    popover.togglePopover();
  });
}

Browser Result

Play in Editor

Note: The :interest-target styles apply only when the browser supports interest invokers and the target is associated with active interest. The fallback allows the information to be opened without relying on the experimental feature.

Browser Support

Baseline: Limited availability. The :interest-target pseudo-class is experimental and is not supported across all major browsers. Chromium-based browsers have introduced support for interest invokers, but compatibility varies by browser and version.

For current compatibility information, visit Can I Use? and search for :interest-target.

Specifications

The :interest-target pseudo-class is defined in CSS Selectors Level 5. It represents an element that is the target of an active interest invoker.

Selectors Level 5 - :interest-target