1

Разъясните пожалуйста почему не работает :nth-child.

.container {
  width: 450px;
  height: 250px;
  border: 1px solid #000000;
  text-align: center
}

.container div {
  height: 50px;
  width: 50px;
  background: green;
  margin: auto;
  display: inline-block;
  opacity: 0.5;
}

.container:nth-child(7) {
  background: red;
}
<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

1
  • Вы же выбрали родителя, а надо дочерние выбирать. .container:nth-child(7) будет искать седьмой контейнер
    – user242433
    17 июл 2017 в 18:55

2 ответа 2

2

Вы указали для контейнера а надо для дива в контейнере

.container {
    width:450px;
    height:250px;
    border: 1px solid #000000;
    text-align: center
}
.container div {
    height: 50px;
    width: 50px; 
    background: green;
    margin: auto;
    display: inline-block;
    opacity: 0.5;
}
.container div:nth-child(7) {
    background: red;
}
 <div class="container">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
Вот что бы получилось если было бы 7 контейнеров и css как у вас

.container {
    width:450px;
    height:250px;
    border: 1px solid #000000;
    text-align: center
}
.container div {
    height: 50px;
    width: 50px; 
    background: green;
    margin: auto;
    display: inline-block;
    opacity: 0.5;
}
.container:nth-child(7) {
    background: red;
}
<div class="container">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
<div class="container">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
<div class="container">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
<div class="container">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
<div class="container">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
<div class="container">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
<div class="container">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
<div class="container">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
<div class="container">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
<div class="container">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
<div class="container">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
<div class="container">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

2

Необходимо задать так .container div:nth-child(7)

.container {
    width:450px;
    height:250px;
    border: 1px solid #000000;
    text-align: center
}
.container div {
    height: 50px;
    width: 50px; 
    background: green;
    margin: auto;
    display: inline-block;
    opacity: 0.5;
}
.container div:nth-child(7) {
    background: red;
}
<div class="container">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

Ваш ответ

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

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