<style type="text/css">
.css_test {
background : #efefef;
border-radius : 5px;
border : 5px solid gray;
}
.css_test div {
background : #fff;
border-radius : 5px;
margin : 10px;
padding : 10px;
}
.css_test img {
border : 5px solid silver;
vertical-align : middle; /* span을 세로 중앙으로 정렬시키기 위함 */
}
.css_test span {
border : 5px solid silver;
padding : 5px;
}
</style>
버튼을 눌러보세용<br><br>
<button type="button"
onclick="j_test('span')">first-of-type 의 span</button>
<button type="button"
onclick="j_test('img')">first-of-type 의 img</button>
<div class="css_test">
<div>
<span>span</span>
<span>span</span>
<img src="//superkts.com/img/huk1.gif" />
<img src="//superkts.com/img/huk1.gif" />
</div>
<div>
<img src="//superkts.com/img/huk1.gif" />
<span>span</span>
<span>span</span>
<img src="//superkts.com/img/huk1.gif" />
</div>
<div>
<img src="//superkts.com/img/huk1.gif" />
<img src="//superkts.com/img/huk1.gif" />
<span>span</span>
<span>span</span>
</div>
</div>
<script type="text/javascript">
function j_test(v){
$('.css_test div ' + v + ':first-of-type').css('border-color', 'blue');
setTimeout(function(){
$('.css_test div ' + v + ':first-of-type').css('border-color', '');
}, 500);
}
</script>