Как поменять стиль у третьего элемента?

Question

Как мне получить третий элемент p

.page-block p:nth-child(3) {
  font-size: 200%;
}

<div class="page-block">
  <div>
    <span>текст</span>
    <p>первый</p>
    <span>текст</span>
    <p>второй</p>
    <span>текст</span>
    <p>третий</p>
  </div>
</div>

Непонимаю почему не ссрабатывает...

Answer 1

Селектор :nth-child(3) в любом случае будет указывать на третий по счету элемент.
Его объединение с p лишь означает, что стили сработают только если 3-м элементом окажется <p>

Можно использовать или :nth-child(6) или p:nth-of-type(3) или p:last-child

.page-block p:nth-of-type(3) {
  font-size: 200%;
}

.page-block p:nth-child(6) {
  /* Можно без `p`, но так очевиднее, что пробел поставлен не случайно. */
  font-family: "Monotype Corsiva";
}

.page-block p:last-child {
  color: red;
}
                                                                     p { margin: 0; }

<div class="page-block">
  <div>
    <span>текст</span>
    <p>первый</p>
    <span>текст</span>
    <p>второй</p>
    <span>текст</span>
    <p>Третий</p>
  </div>
</div>

БЛОГ НА HUSL

Как поменять стиль у третьего элемента?

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