Добавить псевдокласс в nth-child с помощью CSS

Я хочу использовать наведение, чтобы нижняя граница нечетных элементов div отличалась от цвета #75dcff. Однако .card:hover div:nth-child(odd) не работает. Могу ли я применить псевдоклассы к элементам nth-child?

.card {
  margin: 30px;
  padding: 20px 40px 40px;
  max-width: 500px;
  text-align: left;
  background: #fff;
  border-bottom: 4px solid #ccc;
  border-radius: 6px;
}

.card:hover {
  border-color: #75dcff;
}

.card:hover div:nth-child(odd) {
  border-color: #ff7c5e;
}
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>


html css css-selectors pseudo-class
person Brian Patrick    schedule 03.01.2018    source источник
comment
Вы пробовали .card:nth-child(odd):hover? Изменить: см. ответ @chazsolo: o)   -  person agrm    schedule 03.01.2018

Ответы (1)


arrow_upward
5
arrow_downward

Ваш селектор неверен. .card:hover div:nth-child(odd) выбирает элементы div с нечетным индексом, которые являются потомками .card, но ваша структура предполагает, что это должно быть одно и то же. Настройте свой селектор, чтобы он соответствовал нечетным элементам при наведении:

.card {
  margin: 30px;
  padding: 20px 40px 40px;
  max-width: 500px;
  text-align: left;
  background: #fff;
  border-bottom: 4px solid #ccc;
  border-radius: 6px;
}

.card:hover {
  border-color: #75dcff;
}

.card:nth-child(odd):hover {
  border-color: #ff7c5e;
}
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>

person chazsolo    schedule 03.01.2018