1

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;
}
4
  • 4
    Works here: jsfiddle.net/gBSyh Need more information about your problem. Feb 26, 2012 at 9:27
  • 1
    The code you've posted works as intended. Please try to extend your test case, or provide a link where the problem is prominent/ Feb 26, 2012 at 9:32
  • 1
    :first-child has buggy support in IE8 and is not supported on earlier versions, and :last-child is not supported in IE8 or below. Feb 26, 2012 at 9:34
  • What DOCTYPE has your HTML document? Feb 26, 2012 at 14:29

2 Answers 2

1

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

0

Try just doing:

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.