CODEWITHSUNDEEP
csscss-selectors
Cecil Theodore
Cecil Theodore

Reputation: 9939

:first-child pseudo-class doesn't work

I have a two divs with the class of shoots. I want the first div to have a padding-top of 10px and the last div to have a padding-bottom of 10px.

For this I am trying to use the pseudo-class selectors :first-child & :last-child.

last-child works, I have my padding at the bottom of the div, but the first-child doesn't work.

What am I doing wrong?

Mark up:

<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;
}

Upvotes: 1

Views: 1180

Answers (2)

Yazan Rawashdeh
Yazan Rawashdeh

Reputation: 1041

:first-child & :last-child. don't work on block element , they only work on inline elements

Upvotes: 1

Roko C. Buljan
Roko C. Buljan

Reputation: 206171

Try just doing:

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

Upvotes: 0

Related Questions