CSS :first-of-type not working

Question

I thought :first-of-type will effect the first-of-type which in my case is

<div class="box">I am the first box in div.center...</div>

If I remove the <div class="top"> the CSS works and adds the green-top-border.

But I need <div class="top">, so why is it not working if <div class="top"> is there?

FIDDLE

<div class="main-wrap">
    <div class="center">
        <h3>Lorem Ipsum</h3>
        <div class="top">XXX XXX XXXX</div>
        <div class="box">I am the first box in div.center. Why no top border?</div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
</div>

.box {
    width:100%;
    height:30px;
    margin:10px 0;
    background-color:orange;
}

.main-wrap .center div.box:first-of-type {
    border-top:4px solid green;
}
.box {
    position:relative;
    border-bottom:4px solid green;
}

Answer 1

When you have div.top there, that becomes the first div element within its parent. :first-of-type only looks at the type of element; div.box:first-of-type really means select div:first-of-type only when it has the class .box, and not the first div.box.

To reach the first div.box, use an adjacent sibling selector:

.main-wrap .center div.top + div.box {
    border-top:4px solid green;
}