Question

Why does article behave differently to div where last-child is concerned

HTML

<div class="parent">
<div class="example">111</div>
<div class="example">111</div>
<div class="example">111</div>
<div class="example">111</div>
</div>

<br>

<div class="parent2">
<article class="example">111</div>
<article class="example">111</div>
<article class="example">111</div>
<article class="example">111</div>
</div>

CSS

.parent .example{ background-color: red;}
.parent .example:last-child{background-color: yellow;}

.parent2 .example{ background-color: red;}
.parent2 .example:last-child{background-color: yellow;}

DEMO: http://jsfiddle.net/chLLa/1/

Answer 1

You are not closing your tags properly

<div class="parent">
<div class="example">111</div>
<div class="example">111</div>
<div class="example">111</div>
<div class="example">111</div>
</div>

<br>

<div class="parent2">
<article class="example">111</article>
<article class="example">111</article>
<article class="example">111</article>
<article class="example">111</article>
</div>