CSS :interest-source Pseudo-Class

CSS :interest-source Pseudo-Class

The CSS :interest-source pseudo-class selects an interest invoker while the user is showing interest in it. It allows elements such as buttons to change appearance when they trigger related content, including tooltips and informational popovers.

:interest-source Syntax

selector:interest-source {
  property: value;
}

The :interest-source pseudo-class is added to a selector without a space. It matches an interest invoker while the user is actively showing interest in that element.

Basic Example

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

This rule changes the appearance of a button while it is acting as an active interest source.

Attribute Selector

button[interestfor]:interest-source {
  border-color: #0088cc;
}

This rule targets buttons with an interestfor attribute while interest is being shown.

Class Selector

.info-button:interest-source {
  background-color: #eaf6fc;
  color: #003366;
}

This selector applies to an interest source with the info-button class.

How :interest-source Works

Interest invokers allow users to reveal related information through interactions such as hovering, focusing, or other supported interest gestures.

The browser manages the relationship between the interest source and its associated target.

HTML Example

<button type="button" interestfor="help-info">Help</button>
<p id="help-info" popover="hint">Additional information.</p>

CSS Example

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

When the browser recognizes interest in the button, the button matches :interest-source. The associated popover can be displayed automatically.

Interest Must Be Active

Adding an interestfor attribute does not automatically make an element match :interest-source. The user must actually show interest in the element.

Browser-Managed Behavior

In supporting browsers, the browser manages interest detection and the associated popover behavior without requiring custom JavaScript event handlers.

Interest Invokers

An interest invoker is an element that can reveal associated information when the user shows interest in it.

Interest Source

The source is the element that receives the user's interest, such as a button containing a help label.

Interest Target

The target is the associated element containing additional information, often an HTML popover.

Source and Target Example

<button type="button" interestfor="details">More Information</button>
<div id="details" popover="hint">
  Additional details about this feature.
</div>

The button is the interest source, and the <div> is its associated interest target.

Supported Interactions

Interest may be indicated through pointer hovering, keyboard focus, or other gestures supported by the browser and input device.

Not Every Hovered Element

The :interest-source pseudo-class does not match every hovered element. It applies specifically to elements participating in the interest invoker mechanism.

The interestfor Attribute

The HTML interestfor attribute connects an interest invoker to an associated target element.

HTML Syntax

<button type="button" interestfor="tooltip">Show Details</button>
<div id="tooltip" popover="hint">Helpful information.</div>

The attribute value identifies the target element by its id.

The popover Attribute

The popover attribute allows the target to be displayed as a browser-managed popover. The hint state is intended for supplementary content such as tooltips.

Styling the Invoker

[interestfor] {
  padding: 10px 15px;
  border: 2px solid #ccc;
}
[interestfor]:interest-source {
  border-color: #0088cc;
}

The first rule styles all matching interest invokers. The second applies only while interest is active.

Different from popovertarget

The popovertarget attribute is used for direct popover activation, typically through clicking a button. The interestfor attribute is designed for non-primary interactions that express interest.

:interest-source vs. :interest-target

The two interest pseudo-classes identify different elements participating in the same interaction.

Comparison

Source Styling

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

Target Styling

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

The source and target can receive different styles during the same interest interaction.

Important Difference

Neither pseudo-class matches simply because an interestfor relationship exists. Interest must be active for the matching state to apply.

:interest-source vs. :hover

The :hover and :interest-source pseudo-classes can both respond to pointer interaction, but they describe different states.

Comparison

Hover Styling

button:hover {
  background-color: #eaf6fc;
}

Interest Styling

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

Hovering can contribute to interest, but the two states are not interchangeable. The interest state is managed by the interest invoker mechanism.

Interest Delays

CSS provides properties for controlling how long the browser waits before showing or hiding interest-triggered content.

The interest-delay Property

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

The first value specifies the delay before interest becomes active. The second specifies the delay before interest ends.

Starting Delay

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

This property controls the delay before the browser responds to newly expressed interest.

Ending Delay

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

This property controls the delay before the interest state ends.

Practical Use

A short delay can help prevent informational popovers from appearing when the pointer briefly passes over a button.

These properties are experimental and should not be relied upon without checking browser compatibility.

:interest-source Specificity

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

Specificity Examples

Specificity Example

button {
  background-color: #eee;
}
button:interest-source {
  background-color: #006699;
}

When the interest state is active, the second rule has greater specificity and overrides the default background color when other cascade factors are equal.

Practical Uses

The :interest-source pseudo-class is intended for interfaces that reveal supplementary information without requiring a primary activation.

Help Tooltips

Highlight a help button while its associated explanatory popover is active.

Information Previews

Style an interest invoker while the user previews additional information about a feature or link.

Contextual Descriptions

Use interest-triggered content to provide optional explanations for controls or interface elements.

Visual Feedback

Change the source element's background, border, or text color to show that an interest interaction is active.

Related Target Styling

Combine :interest-source with :interest-target to style both the invoker and the associated popover.

Limitations

The :interest-source pseudo-class is experimental and has important compatibility limitations.

Limited Browser Support

The selector is not available in every major browser. Unsupported browsers ignore rules using the selector.

Requires an Interest Invoker

The selector does not apply to ordinary buttons or links unless they participate in a supported interest invoker interaction.

Interest Must Be Active

An element with an interestfor attribute does not match :interest-source until interest is actually shown.

Not Equivalent to Hover

Interest can be triggered through more than pointer hover, depending on browser and input support.

Fallback Required

Important content should remain accessible in browsers that do not support interest invokers.

Accessibility

Interest-triggered content should remain usable for people who navigate with keyboards, touchscreens, and assistive technologies.

Keyboard Access

Use semantic interactive elements, such as buttons, and ensure that supplementary information is accessible without relying exclusively on pointer hover.

Visible Focus Indicators

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

Preserve a clear focus indicator for keyboard users.

Accessible Descriptions

Provide clear labels and meaningful content. Do not rely on the popover's appearance alone to communicate essential information.

Touchscreen Access

Consider users whose devices do not support traditional hover interactions. Provide an accessible alternative for essential content.

Readable Contrast

Maintain sufficient contrast in both default and interest-active states.

Best Practices

• Use :interest-source to style an interest invoker while interest is active.
• Connect the invoker and target using the interestfor attribute.
• Use :interest-target when the associated target also needs conditional styling.
• Do not confuse :interest-source with the general :hover pseudo-class.
• Use appropriate interest delays to avoid distracting interactions.
• Provide accessible alternatives for browsers without interest invoker support.
• Preserve visible keyboard focus indicators.
• Test experimental features before using them in production.

:interest-source Example

This example connects a button to an informational popover. In browsers supporting interest invokers, hovering over or focusing the button can display the popover and activate the :interest-source styles. A fallback button is provided for unsupported browsers.

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 {
  border-color: #003366;
  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 #0088cc;
  background-color: #eaf6fc;
  color: #003366;
}
.interest-demo [popover]:interest-target {
  border-width: 2px;
}
.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-source styles apply only in browsers supporting the interest invoker feature. In unsupported browsers, the example uses a clickable fallback to display the information.

Browser Support

Baseline: Limited availability. The :interest-source pseudo-class is experimental and is not supported in all major browsers. Chromium-based browsers have implemented the feature, while support in Firefox and Safari remains limited or unavailable.

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

Specifications

The :interest-source pseudo-class is defined in CSS Selectors Level 5. It represents an interest source element while the user is showing interest in it.

Selectors Level 5 - :interest-source