【CSS】:has() + aria-currentで現在地ナビをハイライト

投稿日 2026年9月8日
著者くまだ
カテゴリー Web制作

どうも、くまだです。

:has() + aria-current で現在地ナビをハイライトメモ。

aria-current=”page” を1行追加するだけで、スクリーンリーダーはそのリンクを「現在のページ」として認識して読み上げてくれます。

JSでハイライトする場合

コードは以下になります。

<nav>
  <ul>
    <li><a href="/">ホーム</a></li>
    <li><a href="/about/">会社概要</a></li>
    <li><a href="/service/">サービス</a></li>
    <li><a href="/contact/">お問い合わせ</a></li>
  </ul>
</nav>

// JS：現在のURLと href を照合して active を付ける
const currentPath = location.pathname;
document.querySelectorAll('nav a').forEach(link => {
  if (link.getAttribute('href') === currentPath) {
    link.classList.add('active');
    link.closest('li').classList.add('active');
  }
});

nav a.active {
  color: #e44;
  font-weight: bold;
  border-bottom: 2px solid #e44;
}

細かいスタイルは省きますが、こんなイメージ。見た目は出ますが、スクリーンリーダーには「現在のページ」として伝わらない。

CSS で [aria-current=”page”] をハイライトする場合

コードは以下になります。

<nav>
  <ul>
    <li><a href="/">ホーム</a></li>
    <li><a href="/about/" aria-current="page">会社概要</a></li>
    <li><a href="/service/">サービス</a></li>
    <li><a href="/contact/">お問い合わせ</a></li>
  </ul>
</nav>

nav a[aria-current="page"] {
  color: #c0392b;
  font-weight: bold;
  border-bottom: 2px solid #c0392b;
}

スクリーンリーダーも「現在のページ」として読みます。

:has() で親 li にハイライトを伝播

コードは以下になります。

<nav>
  <ul>
    <li><a href="/">ホーム</a></li>
    <li><a href="/about/" aria-current="page">会社概要</a></li>
    <li><a href="/service/">サービス</a></li>
    <li><a href="/contact/">お問い合わせ</a></li>
  </ul>
</nav>

/* CSS：aria-current="page" のリンクを持つ li を装飾 */
nav li:has(> a[aria-current="page"]) {
  background-color: #fdf0ef;
  border-radius: 4px;
}

/* a タグ自体のスタイルも合わせて指定 */
nav a[aria-current="page"] {
  color: #c0392b;
  font-weight: bold;
}

CSS の :has() セレクタは「中に特定の要素を含む親要素」を指定できます。

入れ子ナビのようなものも親メニューを強調できます。

    <nav class="nav-nested">
      <ul>
        <li><a href="/">ホーム</a></li>
        <li>
          <a href="/service/">サービス</a>
          <ul>
            <li><a href="/web-design/">Webデザイン</a></li>
            <li><a href="/coding/" aria-current="page">コーディング</a></li>
            <li><a href="/seo/">SEO対策</a></li>
          </ul>
        </li>
        <li><a href="/contact/">お問い合わせ</a></li>
      </ul>
    </nav>

/* 子に aria-current があるとき、親 li の > a も強調する */
.nav-nested > ul > li:has(a[aria-current="page"]) > a {
  color: #c0392b;
  font-weight: bold;
}
/* 現在地リンク自身の強調 */
.nav-nested a[aria-current="page"] {
  color: #c0392b;
  font-weight: bold;
  background-color: #fdf0ef;
}