I have 4 divs with same class name and select option in each of them. How can I change background in ONLY even divs (2,4,6,8 etc) for select options?
I have tried with :nth-child(even)
, with no luck and when I tried with $(".tmgrpslc(1)").addClass('red');
It did changed the background of second select opetion and was correct. But as said I want to change background for even select options.
@Here is my code:*
<!-- First div -->
<div class="col-md-6 selectgroups">
<div class="nested-fields">
<div class="form-group">
<label class="integer optional" for="choice_group">Choice group</label>
<select class="tmgrpslc" name="[1460553694556][choice_group]" id="1460553694556_choice_group">
<option value="0">A</option>
<option value="1">B</option>
</select>
</div>
</div>
</div>
<!-- second div -->
<div class="col-md-6 selectgroups">
<div class="nested-fields">
<div class="form-group">
<label class="integer optional" for="choice_group">Choice group</label>
<select class="tmgrpslc" name="[1460553694556][choice_group]" id="1460553694556_choice_group">
<option value="0">A</option>
<option value="1">B</option>
</select>
</div>
</div>
</div>
<!-- Third div -->
<div class="col-md-6 selectgroups">
<div class="nested-fields">
<div class="form-group">
<label class="integer optional" for="choice_group">Choice group</label>
<select class="tmgrpslc" name="[1460553694556][choice_group]" id="1460553694556_choice_group">
<option value="0">A</option>
<option value="1">B</option>
</select>
</div>
</div>
</div>
<!-- Fourth div -->
<div class="col-md-6 selectgroups">
<div class="nested-fields">
<div class="form-group">
<label class="integer optional" for="choice_group">Choice group</label>
<select class="tmgrpslc" name="[1460553694556][choice_group]" id="1460553694556_choice_group">
<option value="0">A</option>
<option value="1">B</option>
</select>
</div>
</div>
</div>
If :eq is not good idea and there is other selectors that does the job, I am open to it.
A CSS solution. Use the psuedo selector :nth-child(even)
div.col-md-6:nth-child(even) .tmgrpslc {
background-color: palegreen;
}
<!-- First div -->
<div class="col-md-6 selectgroups">
<div class="nested-fields">
<div class="form-group">
<label class="integer optional" for="choice_group">Choice group</label>
<select class="tmgrpslc" name="[1460553694556][choice_group]" id="1460553694556_choice_group">
<option value="0">A</option>
<option value="1">B</option>
</select>
</div>
</div>
</div>
<!-- second div -->
<div class="col-md-6 selectgroups">
<div class="nested-fields">
<div class="form-group">
<label class="integer optional" for="choice_group">Choice group</label>
<select class="tmgrpslc" name="[1460553694556][choice_group]" id="1460553694556_choice_group">
<option value="0">A</option>
<option value="1">B</option>
</select>
</div>
</div>
</div>
<!-- Third div -->
<div class="col-md-6 selectgroups">
<div class="nested-fields">
<div class="form-group">
<label class="integer optional" for="choice_group">Choice group</label>
<select class="tmgrpslc" name="[1460553694556][choice_group]" id="1460553694556_choice_group">
<option value="0">A</option>
<option value="1">B</option>
</select>
</div>
</div>
</div>
<!-- Fourth div -->
<div class="col-md-6 selectgroups">
<div class="nested-fields">
<div class="form-group">
<label class="integer optional" for="choice_group">Choice group</label>
<select class="tmgrpslc" name="[1460553694556][choice_group]" id="1460553694556_choice_group">
<option value="0">A</option>
<option value="1">B</option>
</select>
</div>
</div>
</div>