css pseudo class
`:interest-target` CSS pseudo-class
Limited availability
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.