Выбор ответа Junior Селекторы и специфичность обновлено
nth-child против nth-of-type
Вопрос
Какой элемент станет красным?
<style>
.list p:nth-child(2) { color: red; }
</style>
<div class="list">
<h3>Заголовок</h3>
<p>Первый абзац</p>
<p>Второй абзац</p>
</div>
Попробуйте сами
Выберите вариант, и откроется разбор.
Показать ответ и разбор
Коротко
Правильный ответ: «Первый абзац»: второй ребёнок .list и при этом p. :nth-child(2) считает всех детей подряд, независимо от тега, а p слева лишь дополнительно проверяет тег.
Варианты ответа
- «Второй абзац»: это второй элемент
pв.list - Ни один: второй ребёнок
.listэтоh3, а неp - «Заголовок»: селектор считает всех детей с нуля
- «Первый абзац»: второй ребёнок
.listи при этомpправильный ответ
Разбор
:nth-child(2) считает всех детей подряд, независимо от тега, а p слева лишь дополнительно проверяет тег. Второй ребёнок здесь «Первый абзац», и он p, значит красный. Второй p выбрал бы p:nth-of-type(2). h3 первый ребёнок, а не второй, и он не p.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.
Предыдущий вопрос
Каскадные слои и специфичность
Следующий вопрос
Как браузер выбирает стиль при конфликте