Читать учебники:
HTML, CSS, JavaScript, DOM
PHP, MySQL, Apache, WordPress
Photoshop, Веб-дизайн, Flat
SEO, SMM, Landing Page

Разница между 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.

Вам понравились уроки? Поддержите проект "Учебники для вебмастера"!
Можете отправить с карточки, мобильного телефона или яндекс.кошелька.
Минимальная сумма перевода 30 руб.

Категория: Статья
Статья создана: 26 Окт 2014
Статья обновлена: 5 Фев 2016

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

gabdrahimov.ru - сайт для веб-разработчиков
(c) При использовании материалов, ссылка на сайт обязательна
Автор: Габдрахимов Дамир Google
e-mail: gabdr0[at]ya.ru
разработка сайта - gabdr0
бесплатный PHP хостинг (без рекламы!) - Beget