Разница между nth-child и nth-of-type

В чём разница между псевдоклассами :nth-child и :nth-of-type

При изучении псевдоклассов CSS, чаще всего не понятна разница между :nth-child и :nth-of-type, давайте проясним её.

Допустим нам нужно в HTML-документе, выбрать второй абзац статьи и сделать его фон серым:

<style>
 CSS-код...
</style>
<div id="content">
 <p>
  Первый абзац...</p>
 <p>
  Второй абзац...</p>
</div>

Если в CSS-код мы разместим:
#content :nth-child(2) { background: gray; } или
#content :nth-of-type(2) { background: gray; },
то серым цветом выделится «Второй абзац…». Однако, если в наш HTML-документ добавить заголовок статьи h1:

<style>
 CSS-код...
</style>
<div id="content">
 <h1>Заголовок статьи 1</h1>
 <p>
  Первый абзац...</p>
 <p>
  Второй абзац...</p>
</div>

То при использовании #content :nth-child(2) { background: gray; }, серым цветом окрасится «Первый абзац…» (поскольку он является вторым элементом потомком в родителе #content).

А при использовании #content :nth-of-type(2) { background: gray; }, серым цветом окрасится «Второй абзац…», (поскольку он является вторым абзацем (типом) в родителе #content).

Если добавить еще один заголовок h1:

<style>
 CSS-код...
</style>
<div id="content">
 <h1>Заголовок статьи 1</h1>
 <h1>Заголовок статьи 2</h1>
 <p>
  Первый абзац...</p>
 <p>
  Второй абзац...</p>
</div>

То при применении псевдокласса #content :nth-child(2) { background: gray; }, серым цветом окрасится «Заголовок статьи 2», а при применении псевдокласса #content :nth-of-type(2) { background: gray; }, серым цветом окрасятся «Заголовок статьи 2» и «Второй абзац…».

Вот примерно такие моменты и разнят данные псевдоклассы, и даже если после этих примеров вам немного не понятно, то не переживайте. Ежедневно практикуясь в языке CSS, вы рано или поздно всё поймёте.

Спасибо за внимание 🙂

Следующий урок, расскажет о псевдоэлементах в CSS.

• Category: Разное