CSS - Conventions For Selecting Multiple Elements

Question

I have a few CSS commands that change a lot of similar elements but it just looks ugly, I was wondering if there was a better way (conventionally) to select them. All documentation suggests that I am correct so I have turned to the community again.

Code:

.customRadioNPS .generic_radio_1, .customRadioNPS .generic_radio_2{
  background:#33CC66;
  height: 40px;
  width: 40px;
}
.customRadioNPS .generic_radio_3, .customRadioNPS .generic_radio_4, .customRadioNPS     .generic_radio_5, .customRadioNPS .generic_radio_6, .customRadioNPS     .generic_radio_7, .customRadioNPS .generic_radio_8{
  background:#FFFF99;
  height: 40px;
  width: 40px;
}
.customRadioNPS .generic_radio_9,.customRadioNPS  .generic_radio_10{
  background:#FF3333;
  height: 40px; 
  width: 40px;
}
.customRadioNPS .generic_roption_1, .customRadioNPS .generic_roption_2{
  background:#33CC66;
}
.customRadioNPS .generic_roption_3, .customRadioNPS .generic_roption_4, customRadioNPS .generic_roption_6, .customRadioNPS .generic_roption_7, .customRadioNPS .generic_roption_8{
  background:#FFFF99;
}
.customRadioNPS .generic_roption_9, .customRadioNPS .generic_roption_10{
  background:#FF3333;
}
.customRadioNPS .generic_roption_5{
  border-right: 2px dashed gray;
  background:#FFFF99;
}

You can see that they are all within the customRadioNPS class but I am not sure if there was a better way so I did not perhaps, have to keep on naming .customRadioNPS?

Answer 1

You cannot simplify the CSS selectors used as such. But depending on the markup (about which you do not say anything), it may be possible to refer to the same elements using simpler selectors.

For example, if classes like generic_radio_1 are only used, and will only be used, for the specific elements that you wish to refer to, then there is no need to use the selector .customRadioNPS before class selectors like .generic_radio_1 (except in the unlikely case that you have other rules that apply to those elements, too, and you need selectors with higher specificity to override them).