How to select the specific position element in the certain class in CSS
<p>Here is my part of HTML code:</p>

<pre><code>&lt;label&gt;
    Work&amp;nbsp;Address:
&lt;/label&gt;
&lt;input type="text" id="workAddress0" name="workAddress0"&gt;
&lt;input type="button" value="+" class="btn btn-small" onclick="ui.createTextfield('work')"&gt;&lt;br&gt;

&lt;label&gt;
    Hobby&amp;nbsp;Address:
&lt;/label&gt;
&lt;input type="text" id="hobbyAddress0" name="hobbyAddress0"&gt;
&lt;input type="button" value="+" class="btn btn-small" onclick="ui.createTextfield('hobby')"&gt;&lt;br&gt;
</code></pre>

<p>My CSS is:</p>

<pre><code>.btn.btn-small:first-of-type{ 
position: absolute;
left: 953px;
top:290px;
height: 40px;
text-align: center;
}

.btn.btn-small:nth-of-type(2){ 
position: absolute;
left: 953px;
top:337px;
height: 40px;
text-align: center;
}
</code></pre>

<p>I want to set the first button to the top 290px and second button to top 337px; But this select doesn't work. Could you tell me how to realize that ? I want to select the first and the second of this class(btn btn-small) separately. Thank you in advance</p>