Вёрстка сайтов | HTML, CSS, JS on Telegram: “Как использовать псевдокласс :has() для навигаци…”

Как использовать псевдокласс :has() для навигации

С помощью :has() можно улучшить UX меню. Например, сделать так, чтобы активный раздел подсвечивался, даже если вы находитесь на дочерней странице.

HTML:

<nav>
  <ul>
    <li><a href="/">Главная</a></li>
    <li>
      <a href="/blog">Блог</a>
      <ul>
        <li><a href="/blog/post1">Пост 1</a></li>
        <li><a href="/blog/post2">Пост 2</a></li>
      </ul>
    </li>
  </ul>
</nav>

CSS:

nav li:has(a.active) > a {
  font-weight: bold;
  color: #007bff;
}

Если на любой из дочерних страниц будет класс active, родительский пункт меню автоматически подсветится. Это полезно для сложных сайтов.

#какэтосделать