CSS: last-child selector won't work?

<div class="commentList">
    <article class="comment " id="com21"></article>
    <article class="comment " id="com20"></article>
    <article class="comment " id="com19"></article>
</div>

开发者_如何学CAny idea why the following last-child selector won't work for me?

.comment {
    width:470px;
    border-bottom:1px dotted #f0f0f0;
    margin-bottom:10px;
}

.comment:last-child {
    border-bottom:none;
    margin-bottom:0;
}

So in this case #com19 shouldn't have a border and a margin at the bottom. What am I doing wrong here?

thank you

It looks like everything is correct - i have created jsfiddle with last-child

The problem is somewhere else - what is the value of "$border" ? (is it php variable?) To be sure that your statements will be used, you can add !important

What browser are you using?

IE<9 will not apply the :last-child selector styles.

I tried to replicate it in Codepen and had a similar Issue. https://codepen.io/Ukmasmu/pen/PoZOLNz

    <div class="commentList">
    <article class="comment " id="com21">
      a
    </article>
    <article class="comment " id="com20">
      b
    </article>
       <article class="comment " id="com19">
         c
       </article>
    <script></script>
    </div>

Probably there is an invisible element at the end. It seems that it may be an Element like a script tag or some other NodeElement that's not visible. Check the DevTools for that possibility.

You could use the :last-of-type pseudo element to be safe!