Удалить выделение из последнего элемента Li

Question

Я пытаюсь удалить последний тег a из последнего элемента, используя CSS, но похоже, что это не работает

Вот что я хочу сделать:

и вот мой код

<div class="menu-map">
    <ul>
        <li><a class="chp" href="#">test1</a></li>
        <li><a class="chp" href="#">test2</a></li>
        <li><a class="chp" href="#">test3</a></li>
        <li><a class="chp" href="#">test4</a></li>
    </ul>
</div>

CSS:

.menu-map ul {
    font-size: 20px;
}
.menu-map ul li {
    display: inline-block;
}
.chp {
    text-transform: capitalize;
    color: #312e2e;
    transition: all 0.3s ease-in-out;
}
.menu-map ul li::after {
    content: ' > ';
    margin: 10px;
}
.chp:hover , .chp:hover::after {
    color: rgb(39, 135, 214);
}
.menu-map ul li:last-child::after {
    content: none;
}

как я могу удалить выделение или тег из последнего элемента (тест 4) для динамической работы?

Answer 1

Как это? это как твой экран

.menu-map ul {
    font-size: 20px;
}
.menu-map ul li {
    display: inline-block;
}
.chp {
    text-transform: capitalize;
    color: #312e2e;
    transition: all 0.3s ease-in-out;
}
.menu-map ul li::after {
    content: ' > ';
    margin: 10px;
}

.menu-map ul li:last-child:hover {
     color: rgb(39, 135, 214);
}
.menu-map ul li:last-child::after {
     content:none;
}
.menu-map ul > li > a {
    color: inherit;
    text-decoration: none;
    pointer-events: none;
    user-select: none;
}

<div class="menu-map">
    <ul>
        <li><a class="chp" href="#">test1</a></li>
        <li><a class="chp" href="#">test2</a></li>
        <li><a class="chp" href="#">test3</a></li>
        <li><a class="chp" href="#">test4</a></li>
    </ul>
</div>

Answer 2

Если ваша цель - отключить связывание последнего a, добавьте его в CSS

.menu-map ul li:last-child a {
    color: inherit;
    text-decoration: none;
    pointer-events: none;
    user-select: none;
}