Mfrhtyj

In Magento 2, I'm working on this Knockout JS template:
app/code/Magento/Checkout/view/frontend/web/template/shipping-address/shipping-method-item.html

<!--

/**

 * Copyright © 2013-2017 Magento, Inc. All rights reserved.

 * See COPYING.txt for license details.

 */

-->

<tr class="row method-row"

    click="element.selectShippingMethod">

    <td class="col col-method">

        <input type="radio"

               class="radio"

               ifnot="method.error_message"

               ko-checked="element.isSelected"

               ko-value="method.carrier_code + '_' + method.method_code"

               attr="'aria-labelledby': 'label_method_' + method.method_code + '_' + method.carrier_code + ' ' + 'label_carrier_' + method.method_code + '_' + method.carrier_code,

                    'checked': element.rates().length == 1 || element.isSelected" />

    </td>

    <td class="col col-price">

        <each args="element.getRegion('price')" render="" />

    </td>

    <td class="col col-method"

        attr="'id': 'label_method_' + method.method_code + '_' + method.carrier_code"

        text="method.method_title" />

    <td class="col col-carrier"

        attr="'id': 'label_carrier_' + method.method_code + '_' + method.carrier_code"

        text="method.carrier_title" />

</tr>

<tr class="row row-error"

    if="method.error_message">

    <td class="col col-error" colspan="4">

        <div role="alert" class="message error">

            <div text="method.error_message"></div>

        </div>

        <span class="no-display">

            <input type="radio"

                   attr="'value' : method.method_code, 'id': 's_method_' + method.method_code" />

        </span>

    </td>

</tr>

I've overridden this template in my custom theme and would like to add a class a selected CSS to the first <tr> element if the element.isSelected

So far I've tried

<tr class="row method-row"

    click="element.selectShippingMethod" data-bind="css: { selected: element.isSelected }">

But this just adds the selected every <tr> from the loop when one is clicked.

 <tr data-bind="css: { cssclassname: element.isSelected }">

html will render

<tr class="cssclassname"> 

You can use attr for ko bind class like this

<div data-bind="attr: {class: 'yourclasshere', id: 'yourIDhere'}">