Highlighting a card permanently

There are multiple cards on my screen, on the click of one of them other cards loads.  So when i click on one of the cards , the focus changes and the css changes on them are lost. So my question is how the CSS holds despite focus going to other cards. using this code now .cardVendor{     background-color: #FFFFFF;     box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.14), 0px 2px 1px rgba(0, 0, 0, 0.12), 0px 1px 3px rgba(0, 0, 0, 0.2);     margin: 5%;     padding: 5%; } .cardVendor:focus{     background-color: #E1FCFF;     border: 2px solid #333333; }
1 answers

A possible solution could be dynamic classes, where you could use a boolean or variable in your domain model to apply the classes. I would suggest putting the :focus class in a new class (e.g. .cardVendor-focus) and applying it like this in your dynamic class:

// if $VariableName/Focus = true then ‘cardVendor-focus’ else ‘cardVendor’ //

This is one of many solutions, another option might be implementing a javascript snippet.