:interest-target

Syntax

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

Examples

Selecting an interest target element

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

HTML

We include a <button> and a <p>. We specify the <button> as an interest invoker by giving it an interestfor attribute; its value is given as the id of the <p> element, therefore the paragraph is the invoker target.

<button interestfor="mytarget">A 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 sttyles 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 #ddd;
  border-radius: 5px;
  background-color: #eee;

  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