Skip to main content
Commonmark migration
ソース リンク

:focus 擬似クラスによって、フォーカスを持っている要素に対して装飾を行うことが出来ます。

ここで、要素がフォーカス可能な領域となるためには、以下の条件を満たす必要があります[1]。実際は別の条件によってもフォーカス可能な要素となり得ますが、今回は紹介しません。

  • 該当の要素にタブインデックスフォーカスフラグがセットされている
  • 該当の要素がレンダリングされているか、関連するキャンバスフォールバックコンテンツとして使用されている
  • 要素が無効化されていない
  • 要素が不活性でない

§ 6.4.2 Data model[1]

 
  • Focusable area:
    Elements that have their tabindex focus flag set, that are not actually disabled, that are not expressly inert, and that are either being rendered or being used as relevant canvas fallback content.
  • DOM anchor
    The element itself.

そして、今回の「北海道の地図の上のピンクの丸」は、これらの条件のうち、最初の 1 つ以外を満たしています。そこで、「北海道の地図の上のピンクの丸」を表現する div 要素に対して tabindex 属性を付与することで、フォーカス擬似要素による装飾を行うことが出来ます。

li {
  list-style: none;
  margin-top: 5px;
}

li:first-of-type {
  margin-top: 0;
}

div {
  width: 50px;
  height: 50px;
  background: rgba(238, 156, 184, 0.48);
}

div:focus {
  background: rgba(233, 30, 99, 0.71);
  /* 最初と最後の div 要素は、フォーカス可能領域としての条件を満たしていないため、フォーカス出来ない */
}
<ul>
  <li>
    <div role="button"></div>
  </li>
  <li>
    <div role="button" tabindex="-1"></div>
  </li>
  <li>
    <div role="button" tabindex="-1"></div>
  </li>
  <li>
    <div role="button" tabindex="-1"></div>
  </li>
  <li>
    <div role="button"></div>
  </li>
</ul>

:focus 擬似クラスによって、フォーカスを持っている要素に対して装飾を行うことが出来ます。

ここで、要素がフォーカス可能な領域となるためには、以下の条件を満たす必要があります[1]。実際は別の条件によってもフォーカス可能な要素となり得ますが、今回は紹介しません。

  • 該当の要素にタブインデックスフォーカスフラグがセットされている
  • 該当の要素がレンダリングされているか、関連するキャンバスフォールバックコンテンツとして使用されている
  • 要素が無効化されていない
  • 要素が不活性でない

§ 6.4.2 Data model[1]

 
  • Focusable area:
    Elements that have their tabindex focus flag set, that are not actually disabled, that are not expressly inert, and that are either being rendered or being used as relevant canvas fallback content.
  • DOM anchor
    The element itself.

そして、今回の「北海道の地図の上のピンクの丸」は、これらの条件のうち、最初の 1 つ以外を満たしています。そこで、「北海道の地図の上のピンクの丸」を表現する div 要素に対して tabindex 属性を付与することで、フォーカス擬似要素による装飾を行うことが出来ます。

li {
  list-style: none;
  margin-top: 5px;
}

li:first-of-type {
  margin-top: 0;
}

div {
  width: 50px;
  height: 50px;
  background: rgba(238, 156, 184, 0.48);
}

div:focus {
  background: rgba(233, 30, 99, 0.71);
  /* 最初と最後の div 要素は、フォーカス可能領域としての条件を満たしていないため、フォーカス出来ない */
}
<ul>
  <li>
    <div role="button"></div>
  </li>
  <li>
    <div role="button" tabindex="-1"></div>
  </li>
  <li>
    <div role="button" tabindex="-1"></div>
  </li>
  <li>
    <div role="button" tabindex="-1"></div>
  </li>
  <li>
    <div role="button"></div>
  </li>
</ul>

:focus 擬似クラスによって、フォーカスを持っている要素に対して装飾を行うことが出来ます。

ここで、要素がフォーカス可能な領域となるためには、以下の条件を満たす必要があります[1]。実際は別の条件によってもフォーカス可能な要素となり得ますが、今回は紹介しません。

  • 該当の要素にタブインデックスフォーカスフラグがセットされている
  • 該当の要素がレンダリングされているか、関連するキャンバスフォールバックコンテンツとして使用されている
  • 要素が無効化されていない
  • 要素が不活性でない

§ 6.4.2 Data model[1]

  • Focusable area:
    Elements that have their tabindex focus flag set, that are not actually disabled, that are not expressly inert, and that are either being rendered or being used as relevant canvas fallback content.
  • DOM anchor
    The element itself.

そして、今回の「北海道の地図の上のピンクの丸」は、これらの条件のうち、最初の 1 つ以外を満たしています。そこで、「北海道の地図の上のピンクの丸」を表現する div 要素に対して tabindex 属性を付与することで、フォーカス擬似要素による装飾を行うことが出来ます。

li {
  list-style: none;
  margin-top: 5px;
}

li:first-of-type {
  margin-top: 0;
}

div {
  width: 50px;
  height: 50px;
  background: rgba(238, 156, 184, 0.48);
}

div:focus {
  background: rgba(233, 30, 99, 0.71);
  /* 最初と最後の div 要素は、フォーカス可能領域としての条件を満たしていないため、フォーカス出来ない */
}
<ul>
  <li>
    <div role="button"></div>
  </li>
  <li>
    <div role="button" tabindex="-1"></div>
  </li>
  <li>
    <div role="button" tabindex="-1"></div>
  </li>
  <li>
    <div role="button" tabindex="-1"></div>
  </li>
  <li>
    <div role="button"></div>
  </li>
</ul>

ソース リンク
supa
  • 5,399
  • 4
  • 18
  • 41

:focus 擬似クラスによって、フォーカスを持っている要素に対して装飾を行うことが出来ます。

ここで、要素がフォーカス可能な領域となるためには、以下の条件を満たす必要があります[1]。実際は別の条件によってもフォーカス可能な要素となり得ますが、今回は紹介しません。

  • 該当の要素にタブインデックスフォーカスフラグがセットされている
  • 該当の要素がレンダリングされているか、関連するキャンバスフォールバックコンテンツとして使用されている
  • 要素が無効化されていない
  • 要素が不活性でない

§ 6.4.2 Data model[1]

  • Focusable area:
    Elements that have their tabindex focus flag set, that are not actually disabled, that are not expressly inert, and that are either being rendered or being used as relevant canvas fallback content.
  • DOM anchor
    The element itself.

そして、今回の「北海道の地図の上のピンクの丸」は、これらの条件のうち、最初の 1 つ以外を満たしています。そこで、「北海道の地図の上のピンクの丸」を表現する div 要素に対して tabindex 属性を付与することで、フォーカス擬似要素による装飾を行うことが出来ます。

li {
  list-style: none;
  margin-top: 5px;
}

li:first-of-type {
  margin-top: 0;
}

div {
  width: 50px;
  height: 50px;
  background: rgba(238, 156, 184, 0.48);
}

div:focus {
  background: rgba(233, 30, 99, 0.71);
  /* 最初と最後の div 要素は、フォーカス可能領域としての条件を満たしていないため、フォーカス出来ない */
}
<ul>
  <li>
    <div role="button"></div>
  </li>
  <li>
    <div role="button" tabindex="-1"></div>
  </li>
  <li>
    <div role="button" tabindex="-1"></div>
  </li>
  <li>
    <div role="button" tabindex="-1"></div>
  </li>
  <li>
    <div role="button"></div>
  </li>
</ul>