CSS: псевдокласс первого типа не работает должным образом

Я пытаюсь применить цвет шрифта только к первой ссылке в компоненте li.

Компонент li имеет класс «открыть» при нажатии.

Чтобы достичь этого, я попытался использовать псевдоклассы li a:first-of-type, а также li a:first-child psuedo, но, к сожалению, цвет применяется ко всем дочерним элементам в li следующим образом:

Как использовать CSS для окрашивания только первого дочернего элемента?: в этом случае «Раздел 2»

li.open a:first-of-type {
  color: blue !important;
}

<ul>
  <li>
    <a href = "#">Section 1</a>
    <ul class = "off-canvas__nav-sub">
      <li><a href = "#">Sub page 1</a></li>
      <li><a href = "#">Sub page 2</a></li>
      <li><a href = "#">Sub page 3</a></li>
    </ul>
  </li>
  <li class = "open">
    <a href = "#">Section 2</a>
    <ul class = "off-canvas__nav-sub">
      <li><a href = "#">Sub page 1</a></li>
      <li><a href = "#">Sub page 2</a></li>
      <li><a href = "#">Sub page 3</a></li>
    </ul>
  </li>
  <li>
    <a href = "#">Section 3</a>
  </li>
  <li>
    <a href = "#">Section 4</a>
  </li>
  <li>
    <a href = "#">Section 5</a>
  </li>
</ul>

:first-of-type означает первый элемент своего типа среди группы братьев и сестер.

— 18.04.2023 10:03

html css

18.04.2023 09:54

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Каждый элемент a в вашем документе является первым элементом a своего родительского элемента.

Если вы хотите настроить таргетинг на элемент a, который является дочерним элементом li с помощью class = "open", используйте дочерний комбинатор.