Использование ::nth-child

Question

У меня есть вот такое всплывающее меню:

Хочу, что бы чётные и нечётные числа немного различались по цвету фона, но мой css не работает. Мой код:

.lvl_slc {
  position: absolute;
  text-align: center;
  top: 1px;
  left: 26px;
  width: 28px;
  height: 146px;
  border: 2px solid rgb(231, 198, 066);
  overflow-x: hidden;
  overflow-y: auto;
}

.lvl_slc>span {
  padding: 2px;
}

.h_lvl {
  width: 28px;
  height: 30px;
  background-color: rgba(77, 32, 11, 0.527);
}

.h_lvl::nth-child(odd) {
  background-color: rgba(255, 255, 255, 0.1);
}

.h_lvl::nth-child(even) {
  background-color: rgb(0, 0, 0, .1);
}

.lvl_slc::-webkit-scrollbar {
  display: none;
}

<div class="lvl_slc">
  <div class=h_lvl><span>32</span></div>
  <div class=h_lvl><span>31</span></div>
  <div class=h_lvl><span>30</span></div>
  <div class=h_lvl><span>29</span></div>
  <!-- и т.д. -->
</div>

Но nth-child не даёт никакого результата. Что я делаю не правильно?

Answer 1

Одинарные двоеточия - псевдокласс, двойные - псевдоэлемент. nth-child - псевдокласс

.lvl_slc {
  position: absolute;
  text-align: center;
  top: 1px;
  left: 26px;
  width: 28px;
  height: 146px;
  border: 2px solid rgb(231, 198, 066);
  overflow-x: hidden;
  overflow-y: auto;
}

.lvl_slc>span {
  padding: 2px;
}

.h_lvl {
  width: 28px;
  height: 30px;
  background-color: rgba(77, 32, 11, 0.527);
}

.h_lvl:nth-child(odd) { /*одинарные двоеточия, вместо двойных*/
  background-color: rgba(255, 255, 255, 0.1);
}

.h_lvl:nth-child(even) { /*одинарные двоеточия, вместо двойных*/
  background-color: rgb(0, 0, 0, .1);
}

.lvl_slc:-webkit-scrollbar {
  display: none;
}

<div class="lvl_slc">
  <div class=h_lvl><span>32</span></div>
  <div class=h_lvl><span>31</span></div>
  <div class=h_lvl><span>30</span></div>
  <div class=h_lvl><span>29</span></div>
  <!-- и т.д. -->
</div>

БЛОГ НА HUSL

Использование ::nth-child

Ответы (1 шт):