css - CSS : first-of-type が機能しない

Question

私は考えました：first-of-typeはfirst-of-typeに影響しますが、私の場合は

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

CSSを削除する <div class="top">と、green-top-border が機能して追加されます。

しかし、必要なのですが<div class="top">、あるのになぜ機能しないの<div class="top">ですか?

フィドル

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