nth-of-type on squarespace - html

Question

I am using Squarespace and trying to move the margin of the first .field.text.three-digits using "nth-of-type", but I can't get it to work right.
CSS:
.form-item.fields.phone:nth-of-type(3) {
background-color: red;
margin-left: 20%;
}
HTML:
<fieldset id="phone-yui_3_17_2_1_1531771537607_16560" class="form-item fields
phone">
<div class="title">Phone</div>
<legend>Phone</legend>
<div class="field text three-digits" id="yui_3_17_2_1_1531936132691_509">
<label class="caption" id="yui_3_17_2_1_1531936132691_508"><input
class="field-element" x-autocompletetype="phone-area-code" type="text"
maxlength="3" data-title="Areacode" id="yui_3_17_2_1_1531936132691_507">
(###)</label>
</div>
<div class="field text three-digits">
<label class="caption"><input class="field-element" x-
autocompletetype="phone-local-prefix" type="text" maxlength="3" data-
title="Prefix">###</label>
</div>
<div class="field text four-digits">
<label class="caption"><input class="field-element" x-
autocompletetype="phone-local-suffix" type="text" maxlength="4" data-
title="Line">####</label>
</div>
</fieldset>
Thanks!

Answer 1

This code:
.form-item.fields.phone:nth-of-type(3)
Will apply the styles to the third element it finds with these three classes
form-item fields phone
If you want to modify the first instance of an element with the classes field text three-digits, your CSS should be something like this:
.field.text.three-digits:nth-of-type(2) {
background-color: red;
margin-left: 20%;
}