Не работают псевдоселекторы first-child и nth-child

344

25 июля 2017, 16:43

.features { 
  width: 695px; 
  margin: 0 auto; 
  text-transform: uppercase; 
  font-size: 18px; 
} 
 
.f1 { 
  float: left; 
} 
 
.f2 {} 
 
.f3 { 
  float: right; 
} 
 
.features p:first-child { 
  color: #22795b; 
}

<div class="features"> 
 
  <div class="f1"> 
    <center> 
      <img src="img/1.png" alt="Фиксированные цены"> 
      <p>Фиксированные цены</p> 
    </center> 
  </div> 
 
  <center> 
    <div class="f2"> 
      <center> 
        <img src="img/2.png" alt="Определенные сроки"> 
        <p>определенные сроки</p> 
      </center> 
    </div> 
  </center> 
 
  <center> 
    <div class="f3"> 
      <center> 
        <img src="img/3.png" alt="Гарантированная сатисфакция"> 
        <p>гарантированная сатисфакция</p> 
      </center> 
    </div> 
  </center> 
</div>

Answer 1

:first-child это псевдокласс.
Как будто кто-то прошелся по вашему коду и добавил в каждый первый дочерний элемент родительского элемента класс first-child.

<body>
  <div class="features first-child">  <!-- Сюда добавил - div.features первый в body -->
    <div class="f1 first-child">      <!-- Сюда добавил - div.f1 первый в div.features -->
      <center class="first-child">    <!-- Сюда добавил - center первый в div.f1 -->
        <img>                         <!-- Сюда добавил - img первый в center -->
        <p></p>                       <!-- А сюда не добавил - p не первый элемент в center -->
      </center>
    </div>
    <div class="f2">                  <!-- И сюда не добавил - div.f2 не первый элемент в div.features -->
  </div>
</body>

То есть правило

.features p:first-child { color: #22795b; }

сработает для элемента только если:

элемент первый дочерний элемент (имеет класс :first-child)
элемент p
элемент является дочерним для .features на любом уровне вложенности

Другое дело псевдокласс :first-of-type, который применяется к первому дочернему элементу по типу элемента.

div :first-of-type { 
  background-color: lime; 
}

<div> 
  <span>Это span первый!</span> 
  <span>Это span нет. :(</span> 
  <span>что насчёт этого <em>вложенного элемента</em>?</span> 
  <strike>Это другой тег</strike> 
  <span>Грустно, это тоже нет...</span> 
</div>

Пример взят с сайта MDN. Ссылка

В вашем примере нужно заменить .features p:first-child на .features p:first-of-type, чтобы заработало так, как вы ожидаете.

Answer 2

Селектор необходимо применять к первым вложенным элементам в родитель. Учитывая разную разметку в примере я бы привязался вот так:

.features { 
  width: 695px; 
  margin: 0 auto; 
  text-transform: uppercase; 
  font-size: 18px; 
} 
 
.f1 { 
  float: left; 
} 
 
.f2 {} 
 
.f3 { 
  float: right; 
} 
 
.features > *:first-child p { 
  color: red; 
}

<div class="features"> 
 
  <div class="f1"> 
    <center> 
      <img src="img/1.png" alt="Фиксированные цены"> 
      <p>Фиксированные цены</p> 
    </center> 
  </div> 
 
  <center> 
    <div class="f2"> 
      <center> 
        <img src="img/2.png" alt="Определенные сроки"> 
        <p>определенные сроки</p> 
      </center> 
    </div> 
  </center> 
 
  <center> 
    <div class="f3"> 
      <center> 
        <img src="img/3.png" alt="Гарантированная сатисфакция"> 
        <p>гарантированная сатисфакция</p> 
      </center> 
    </div> 
  </center> 
</div>

Answer 3

У тега p нет потомков, поэтому CSS-правило p:first-child не применяется.

Создание интернет-магазина парфюмерии в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Помогите создать дейстие [требует правки]

Я хотел бы создать сайт лотерею, но не знаю какой код нужен, чтобы, например, 10 человек положили 10 долларов, и только один выиграет 100Пожалуйста,...

191

HTML

Плиточный дизайн

При верстке psd наткнулся на плиточный дизайнМне нужно понять что использовать: flexbox, grid, div или таблицы использовать фреймворки нельзя только...

271

HTML

плоскость rotate 3d в css

Есть вот такой куб

312

HTML

Не работает toggle на ios

Помогите не могу поймать ошибку, во всех отладчиках мобильное меню нормально работает, а вот на ios устройствах после нажатия на кнопку, виснет...

266