Блог

Главная - Вопросы по программированию - Применять стиль CSS только к определенному элементу li

Применять стиль CSS только к определенному элементу li

#css

#css

Вопрос:

У меня есть это меню :

 <ul class="elementor-nav-menu">
    <li><a href="">Locations</a></li>
    <li><a href="">Fuel</a></li>
    <li><a href="">About Us</a>
        <ul>
            <li><a href="">Sub item 1</a></li>
            <li><a href="">Sub item 2</a></li>
            <li><a href="">Sub item 3</a></li>
            <li><a href="">Sub item 4</a></li>
        </ul>
    </li>
    <li><a href="">Contact</a></li>
    <li><a href="">Find Us</a></li>
</ul>

Теперь я хочу добавить border-bottom стиль только к местоположениям, топливу, контакту при наведении курсора мыши.

Для этого я использую следующий CSS:

 .elementor-nav-menu li:not(:nth-child(3n)):hover {
    border-bottom: 3px solid yellow;
}

Но, похоже, это не работает. Код добавляет стиль к последнему элементу, а также к последнему элементу выпадающего меню, который мне не нужен.

Комментарии:

1. разве вы не можете просто создать отдельный класс для этих трех элементов?

2. @andymccullough вы имеете в виду, что я должен добавить класс к этим 3 элементам?

3. Да, добавьте класс к этим элементам и просто ориентируйтесь на этот класс.

4. Есть ли какой-либо другой способ без добавления класса?

5. И найдите нас с границей или без нее? Для меня это, кажется, работает нормально, за исключением того, что он применяется к вложенным элементам3 таким образом

Ответ №1:

Этот ответ основан на селекторе дочернего комбинатора, который выбирает только прямые дочерние элементы элемента.

 .elementor-nav-menu > li:nth-child(1):hover,
.elementor-nav-menu > li:nth-child(2):hover,
.elementor-nav-menu > li:nth-child(4):hover
{
  border-bottom: 3px solid yellow;
}  
 <ul class="elementor-nav-menu">
    <li><a href="">Locations</a></li>
    <li><a href="">Fuel</a></li>
    <li><a href="">About Us</a>
        <ul>
            <li><a href="">Sub item 1</a></li>
            <li><a href="">Sub item 2</a></li>
            <li><a href="">Sub item 3</a></li>
            <li><a href="">Sub item 4</a></li>
        </ul>
    </li>
    <li><a href="">Contact</a></li>
    <li><a href="">Find Us</a></li>
</ul>

Комментарии:

1. Я хочу добавить стиль border-bottom только к местоположениям, топливу, контакту при наведении курсора мыши.

2. Извините, я должен был прочитать более внимательно, я обновил anwser.

3. Какое простое решение! Я должен больше использовать свой мозг 🙂

4. Чтобы остановить переход, вы должны создать стиль по умолчанию для элемента li as border-bottom: 3px solid transparent . При наведении это будет отображено в то, что вы хотите, и вуаля.

5. вы также можете смешивать селектор с тегами фильтрации, здесь .elementor-nav-menu > li:not(:nth-child(3)):not(:last-child):hover { border-bottom: 3px solid yellow;} тоже работает 😉