The:interest-sourceCSSpseudo-class represents aninterest invoker element when interest is shown on it.

Syntax

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

Examples

Selecting an interest invoker element

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

HTML

The markup includes a<button> and a<p>. We specify the<button> as an interest invoker by giving it theinterestfor attribute whose value matches theid of the<p> element, making the paragraph the target element. The paragraph is turned into a popover by giving it thepopover attribute, which hides it initially.

<button interestfor="mypopover">Button</button><p popover>A hover tooltip</p>

CSS

In the CSS, we specify a rule with an:interest-source selector to apply a specific combination ofbackground-color andcolor to the<button> when interest is shown on it. We also apply some other styles to the<button>, which are hidden for brevity.

button {  margin: 10px;  padding: 5px 10px;  border: 1px solid #ddd;  border-radius: 5px;  font-size: 1.5em;  background-color: #eee;  cursor: pointer;}

button:interest-source {  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 thehotpink andpurple color combination is applied only when interest is shown.

Specifications

Browser compatibility

See also

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