: псевдокласс первого ребенка не работает

Question

У меня есть два div с классом shoots.Я хочу, чтобы первый div имел padding-top 10 пикселей, а последний div имел padding-bottom 10 пикселей.

. Для этого я пытаюсь использовать селекторы псевдокласса :first-child & :last-child.

last-child работает, у меня заполнение в нижней части div, но first-child не работает.

Что я делаю не так?

Разметка:

<div class="item-list">
     <div class='item'>
         <div class="shoots">
              *content*
         </div>
         <div class="shoots">
              *content*
         </div>
     </div>
</div>

CSS

.item-list .item .shoots:first-child
{
    padding-top: 10px;
}
.item-list .item .shoots:last-child
{
    padding-bottom: 10px;
}

Answer 1

: первый ребенок &: последний ребенок.не работают с блочными элементами, они работают только со встроенными элементами

Answer 2

Попробуйте просто сделать:

.shoots:first-child{
    padding-top: 10px;
}
.shoots:last-child{
    padding-bottom: 10px;
}