меню цветового форматирования li: nth-child ()

Question

У меня есть меню, содержащее элементы ul li. У меня есть пять предметов, используя flexbox, чтобы выровнять их по последнему пункту, используя margin-left:auto;, чтобы сдвинуть его вправо.

Я также использую transform: skewX (45deg) для создания стрелок для каждого li::before и li::after, и у меня есть начальный цвет фона. Граница стрелки имеет желтый цвет.

Моя проблема в том, что я хотел бы индивидуально установить цвет для каждого элемента li, кроме последнего li.

Итак, я хотел бы использовать свойство li: nt-child и установить цвет фона, а также принять во внимание значения до и после.

Полагаю, мне также нужно использовать z-индекс, возможно, чтобы предыдущие и последующие значения цвета обрабатывались надлежащим образом.

Это мой HTML-код:

<nav class="flex-nav" id="nav">
    <ul>
      <li><a href="./index.pug">Home page</a></li>
      <li><a href="./test.pug">Test page</a></li>
      <li><a href="./test.pug">Link1</a></li>
      <li><a href="./test.pug">Link2</a></li>
      <li><a href="./test.pug">Login</a></li>
    </ul>
  </nav>

А это мой css:

.flex-nav ul {
    display: flex;
    list-style-type: none;
    padding-left: 0;
    white-space: nowrap;
}

.flex-nav ul li {
    justify-content: space-between;
    align-items: center;
    opacity: 1.0;
    transition: opacity .2s ease-in-out;
    position: relative;
    line-height: 26px;
    margin: 0 9px 0 -10px;
    padding: 0 20px;
}

ul li::before,
ul li::after {
    border-right: 4px solid yellow;
    content: '';
    display: block;
    height: 50%;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: -1;
    transform: skewX(45deg);
    background-color: #b0e0e6;
}




ul li::after {
    bottom: 0;
    top: auto;
    transform: skewX(-45deg);
}

ul li:last-of-type::before,
ul li:last-of-type::after {
    display: none;
}

ul li a {
    font: bold 18px Sans-Serif;
    letter-spacing: -1px;
    text-decoration: none;

}

ul>li:hover {
    opacity: 1.0;
}

ul:hover>li:not(:hover) {
    opacity: 0.5;
}


.flex-nav ul li:last-child {
    margin-left: auto;
}

Спасибо:)

Answer 1

Попробуйте ниже CSS для изменения цвета фона для первого, второго и третьего элементов.Спасибо

.flex-nav ul {
  display: flex;
  list-style-type: none;
  padding-left: 0;
  white-space: nowrap;
}

.flex-nav ul li {
  justify-content: space-between;
  align-items: center;
  opacity: 1.0;
  transition: opacity .2s ease-in-out;
  position: relative;
  line-height: 26px;
  margin: 0 9px 0 -10px;
  padding: 0 20px;
}

.flex-nav li:before,
.flex-nav li:after {
  border-right: 4px solid yellow;
  content: '';
  display: block;
  height: 50%;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: -1;
  transform: skewX(45deg);
}

.flex-nav li:first-child::before,
.flex-nav li:first-child::after {
  background-color: red;
}

.flex-nav li:nth-child(2)::before,
.flex-nav li:nth-child(2)::after {
  background-color: green;
}

.flex-nav li:nth-child(3)::before,
.flex-nav li:nth-child(3)::after {
  background-color: blue;
}

<nav class="flex-nav" id="nav">
    <ul>
      <li><a href="./index.pug">Home page</a></li>
      <li><a href="./test.pug">Test page</a></li>
      <li><a href="./test.pug">Link1</a></li>
      <li><a href="./test.pug">Link2</a></li>
      <li><a href="./test.pug">Login</a></li>
    </ul>
  </nav>