1

Я хочу третий элемент перекрасить в фиолетовый, выбираю его через :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>

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

0

1 ответ 1

3

У вас опечатка в слове 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>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.