the unintuitive nature of :first-of-type

The specification for CSS3's :first-of-type sounds like it would select the first occurrence of a child of a type within its parent element. However, counter intuitively, it is equivalent to nth-of-type(1); and selects the first child within a parent of the type, but only if it is the first child of that element.

by cgspicer

HTML

<div id="foo">
    <div class="notBar"></div>
    <div class="bar"></div>
    <div class="bar"></div>
    <div class="bar"></div>
</div>
<div class="separator" style="height: 30px;"></div>
<div id="foofoo">
    <div class="bar"></div>
    <div class="notBar"></div>
    <div class="bar"></div>
    <div class="bar"></div>
</div>
<a href="#" id="runIt" style="display:inline-block;margin-top:20px;padding:5px;background-color:rgb(242,31,12);color:rgb(89,2,2);border:1px solid rgb(89,2,2);">What I think the CSS3 selector :first-of-type should do</a>

CSS

body { background: rgb( 217,197,160); text-align:center; }
.bar, .notBar { height: 30px; background-color: rgb( 166, 152, 128 ); }
.bar:first-of-type { height: 30px; background-color: rgb( 242, 31, 12 ); }

JavaScript

$('#runIt').click( function() {firstOfType( document.getElementById('foo'), 'bar').style.cssText = "height: 30px; background-color: rgb( 242, 31, 12 );"; } );

function firstOfType( parent, className ) {
    var childrenOfType = parent.getElementsByClassName( className ); 
    var selected = childrenOfType[0];
    return selected;
}