Не работает :nth-child. Как исправить?

Question

Я хочу третий элемент перекрасить в фиолетовый, выбираю его через :nth-child.

.flex-container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  outline: 2px solid red;
  margin: 0 -15px;
}

.col_item {
  min-width: 0;
  padding: 0 15px;
}

.item {
  padding: 15px;
  width: 100px;
  height: 100px;
  background: pink;
}

.col_item:ntn-child(3) > .item {
    background: purple;
  }

<div class="flex-container">
  <div class="col_item">
    <div class="item">Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
  </div>
  <div class="col_item">
    <div class="item">Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
  </div>
  <div class="col_item">
    <div class="item">Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
  </div>
</div>

Почему не получается выбрать элемент?

Answer 1

У вас опечатка в слове nth-child - вы написали ntn-child:

.flex-container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  outline: 2px solid red;
  margin: 0 -15px;
}

.col_item {
  min-width: 0;
  padding: 0 15px;
}

.item {
  padding: 15px;
  width: 100px;
  height: 100px;
  background: pink;
}

.col_item:nth-child(3) > .item {
    background: purple;
  }

<div class="flex-container">
  <div class="col_item">
    <div class="item">Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
  </div>
  <div class="col_item">
    <div class="item">Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
  </div>
  <div class="col_item">
    <div class="item">Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
  </div>
</div>

БЛОГ НА HUSL

Не работает :nth-child. Как исправить?

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