`:interest-target` CSS pseudo-class

The :interest-target CSS pseudo-class represents the target element associated with an interest invoker when interest is shown on that invoker.

Syntax

:interest-target {
  /* ... */
}

Examples

Selecting the target element associated with an interest invoker

In this example, we demonstrate how :interest-target can be used to apply styles to an interest invoker element's target element when interest is shown on the invoker.

HTML

The markup includes a <button> and a <p>. We specify the <button> as an interest invoker by giving it the interestfor attribute whose value matches the id of the <p> element, making the paragraph the target element.

<button interestfor="mytarget">Button</button>
<p id="mytarget">A paragraph</p>

CSS

In the CSS, we specify a rule with an :interest-target selector, which will apply a specific set of styles to the <p> element when interest is shown in the <button>. We also apply some other styles to the <button>, which we've hidden for brevity.

body {
  margin: 10px;
}

button {
  padding: 5px 10px;
  border: 1px solid #dddddd;
  border-radius: 5px;
  background-color: #eeeeee;

  cursor: pointer;
}

p:interest-target {
  font-size: 1.5em;
  font-family: sans-serif;
  padding: 10px;
  background-color: hotpink;
  color: purple;
}

Result

This renders as follows:

Try showing interest in the button (for example, by hovering or focusing it), and note how this results in the styles shown earlier being applied to the paragraph.

Specifications

Browser compatibility

See also

• :interest-source
• Popover API
• Using interest invokers
• CSS selectors module