How to make specific checkbox items bold (not all) via CSS? - html

Question

I have a CSS coding challenge for everyone here...
I have searched google and looked at multiple options, but cannot figure this one out.
Is also worth mentioning that I'm not a developer, but I understand the basics of how to implement CSS.
I have a section of code that contains check boxes,
I need to make only specific checkbox items bold (not all of the items) via CSS...
Under normal circumstances, the CSS code for this would be: font-weight: bold;
in the right class or ID, however, in my case, I'm using a third party platform with predefined, css classes for each of the code sessions, in the case of the checkboxes section, the CSS class for this is called: .formFieldLabel
So the CSS code section would like so:
.formFieldLabel {
padding-bottom: 2px;
}
Below is the html code section for the checkboxes:
<table cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>
<div class="" style="overflow: hidden">
<table cellspacing="0" cellpadding="1" class="">
<tbody>
<tr>
<td width="20" align="left">
<input type="checkbox" name="Field 1" id="form_0006_fld_2-0" value="First Choice">
</td>
<td width="*" align="left" style="padding-top: 3px; padding-right: 10px">
<label for="form_0006_fld_2-0" class="formFieldLabel">First Choice</label>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr>
<td>
<div class="" style="overflow: hidden">
<table cellspacing="0" cellpadding="1" class="">
<tbody>
<tr>
<td width="20" align="left">
<input type="checkbox" name="Field 1" id="form_0006_fld_2-1" value="Second Choice">
</td>
<td width="*" align="left" style="padding-top: 3px; padding-right: 10px">
<label for="form_0006_fld_2-1" class="formFieldLabel">Second Choice</label>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr>
<td>
<div class="" style="overflow: hidden">
<table cellspacing="0" cellpadding="1" class="">
<tbody>
<tr>
<td width="20" align="left">
<input type="checkbox" name="Field 1" id="form_0006_fld_2-2" value="Third Choice">
</td>
<td width="*" align="left" style="padding-top: 3px; padding-right: 10px">
<label for="form_0006_fld_2-2" class="formFieldLabel">Third Choice</label>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
Resuming, the CSS code to make such item bold will need to go inside the following CSS code section:
.formFieldLabel {
padding-bottom: 2px;
}
Can anyone please help me implement this solution?

Answer 1

You could use :nth-child() selector in css to select the checkbox you want.
So maybe something like this to select the second checkbox:
tr:nth-child(2) table input { }
Not sure it the above css works but, you can use :nth-child() to select the <tr> you want from the parent table then from there you can select the input box in the child table.

Answer 2

You can use attribute selectors like this.
<style>
.formFieldLabel[for=form_0006_fld_2-0] {
font-weight: bold;
}
</style>
But you have to know the id of checkbox to do this.

Answer 3

or just add a second css class
class="formFieldLabel boldLabel"