Финальное задание:вопрос про nth-child(odd)

Курсы §16. Наследование и каскадирование
1

Сделал задание,всё верно, но осталось недопонимание: мы прописываем
.info .fact:nth-child(odd)
{
background: #ecf0f1;
}
но у нас при этом выделяется не первая и третья строка, т.е. имя: феликс и Вероисповедание:верю в холодильник, а вторая и четвертая, хотя odd гласит, что правило задаётся нечетным.Моя логика у нас есть 4 класса fact, поэтому окрасить фон в серый он должен у первого и 3-его, а делает
это у второго и четвертого Почему так происходит, вопрос уже задавался, но так и нет ответа, поэтому решил поднять ещё раз! Неужели никто не знает?

2

Дело в том, что внутри блока с классом .info перед div-ами с классом .fact есть заголовок h2, который также участвует в расчете. Поэтому получается, что первым (nth-child(1)) будет заголовок, nth-child(2) - это “Имя Феликс”, nth-child(3) - это “Позывные…” и т. д.
Вот фрагмент для наглядности:

<div class="info">
                <h2 id="info-title">Общая информация</h2> <!-- nth-child(1) -->
                <div class="fact"> <!-- nth-child(2) -->
                    <div class="title">Имя</div>
                    <div class="value">Феликс</div>
                </div>
                <div class="fact">  <!-- nth-child(3) -->
                    <div class="title">Позывные</div>
                    <div class="value">Кто в тапки нассал?</div>
                </div>
                <div class="fact">  <!-- nth-child(4) -->
                    <div class="title">Вероисповедание</div>
                    <div class="value">Верю в холодильник</div>
                </div>
                <div class="fact">  <!-- nth-child(5) -->
                    <div class="title">Политические</div>
                    <div class="value">Продам все за еду</div>
                </div>
                ...
</div>
3

Я вот понять не могу, почему h2 - первый элемент, если мы пишем .info .fact , т.е он должен применять это к элементу div с классом факт. Мы ведь не пишем .info:nth-child(odd), который будет применять стили для элементов в классе .info. Разъясните пожалуйста данный пример подробнее. Спасибо.

То есть разве не вот так все идет?

%D0%91%D0%B5%D0%B7%D1%8B%D0%BC%D1%8F%D0%BD%D0%BD%D1%8B%D0%B9
Безымянный.png694×319 18.6 KB

4

Попытаюсь рассказать как я это сам понимаю:

Внутри контейнера с классом .info находится несколько элементов – в данном примере h2 и div-ы.
Но, в других случаях могут находится и параграфы и ссылки и картинки…

Так вот – псевдокласс :nth-child(odd) в пределах родительского контейнера .info пересчитает их всех от первого до последнего.
Потом :nth-child(odd) попытается применить правило ко всем нечетным элементам.

Но отработает правило только у нечетных элементов с классом .fact.

Поправьте, если ошибаюсь…

5

Если вы пишете .info .fact - вы обращаетесь к элементам с классом .fact, h2 здесь уже не при чем. Если пишете .info h2 или .info :nth-child(1) - обращаетесь к заголовку (обратите внимание на наличие пробела перед двоеточием в селекторе).

6

Если вы пишете .info .fact - вы обращаетесь к элементам с классом .fact, h2 здесь уже не при чем.

Сделал задание,всё верно, но осталось недопонимание: мы прописываем
.info .fact:nth-child(odd)
{
background: #ecf0f1;
}

Так он вроде так и спросил в самом первом посте