:interest-target 擬似クラス (CSS)

構文

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

例

関心インボーカー要素に関連付けられた対象要素の選択

この例では、関心インボーカー要素に関心が示された際に、:interest-target を使用して、その関心インボーカー要素の対象要素にスタイルを適用する方法を使用できます。

HTML

このマークアップには、<button> と <p> が含まれています。<button> を関心インボーカーとして指定するために、<p> 要素の id と一致する値を interestfor 属性に設定し、この段落を対象要素としています。

<button interestfor="mytarget">ボタン</button>
<p id="mytarget">段落</p>

CSS

CSS では、:interest-target セレクターを持つルールを指定しています。これにより、<button> に対して関心が表示された際に、<p> 要素に特定のスタイルセットが適用されます。また、<button> に対してもいくつかのスタイルを適用していますが、説明を簡潔にするため、ここではそれらを省略しています。

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;
}

結果

次のようにレンダリングされます。

そのボタンに関心を示してみてください（例えば、ポインターをかざしたり、フォーカスを当てたりするなど）。そうすると、先ほど示したスタイルが段落に適用される様子を確認できます。

仕様書

ブラウザーの互換性

関連情報

• :interest-source
• ポップオーバー API
• 関心インボーカーの使用
• CSS セレクターモジュール