Испытание 3: товары в каталоге [3/3] nth-of-type

Курсы Завершающие испытания
1

Добрый день.

.catalog-item .actions:nth-of-type(1){
display:none;
}

Объясните почему этот селектор запрещает показывать .actions для второго блока с перфоратором?
Ведь по идее значение стоит (1) , а в разметке убирает второй .actions.

2 
<!DOCTYPE html>
<html>
    <head>
        <title>Испытание 3: каталог</title>
        <meta charset="utf-8">
    </head>
    <body>
        <div class="catalog-items">
            <div class="catalog-item">
                <div class="flag flag-new">новинка</div>
                <div class="actions">
                    <a href="#" class="btn buy">Купить</a>
                    <a href="#" class="btn bookmark">В закладки</a>
                </div>
                <div class="image"><img width="218" height="168" src="/assets/ifmo/product.jpg"></div>
                <div class="title">Перфоратор BOSCH</div>
                <div class="price">15 500 Р.</div>
            </div>
            <div class="catalog-item">
                <div class="actions">
                    <a href="#" class="btn buy">Купить</a>
                    <a href="#" class="btn bookmark">В закладки</a>
                </div>
                <div class="image"><img width="218" height="168" src="/assets/ifmo/product.jpg"></div>
                <div class="title">Перфоратор HUMMER</div>
                <div class="price">14 500 Р.</div>
            </div>
        </div>
    </body>
</html>

В первом блоке перед .actions находится div.flag.flag-new. Поэтому к первому .actions селектор .catalog-item .actions:nth-of-type(1) не применяется, так как див не первый в блоке.

1 лайк