I am trying to update the styles of a button when it is clicked. I initially set the style for the first element on page load, but now I need to remove those styles from the first element and apply them to the clicked button instead. I am having trouble figuring out how to do this using nth-child(1). Can anyone provide guidance?
Below is my HTML:
<tr>
<!-- ko foreach: optionValues -->
<td>
<input type="radio" id="volt" name="volt"
data-bind="attr: {id: 'CC-prodDetails-' + $data.value}, value: $parent.selectedOption">
<button data-bind="attr: {for: 'CC-prodDetails-' + $data.value}, text:key,
click:function(key){
$parent.selectedOption(key);
$parent.selectedOptionValue(key);
}" class="voltagem"></button>
</td>
<!-- /ko -->
And this is my CSS:
input {
display: none;
}
.voltagem {
font-size: 20px;
border-color: #333;
border-radius: 10px;
border-style: dotted;
margin-left: 25px;
height: 55px;
width: 135px;
background-color: transparent;
}
.voltagem:focus {
border-color: blue;
border-style: solid;
outline: none;
}
td:nth-child(1) .voltagem {
border-color: blue;
border-style: solid;
outline: none;
}