Css grouping multiple id`s classes

I have something like this:

<div id="attributes1"><span class="heading_fieldset"></div>
<div id="attributes2"><span class="heading_fieldset"></div>

and

#attributes1 .heading_fieldset {
  display:inline-block;
  width: 30px;
}
#attributes2 .heading_fieldset {
  display:inline-block;
  width: 30px;
}

how can I group the CSS to be something like (the next CSS is not good…it messes up my page):

#attributes1, #attributes2 .heading_fieldset {
  display:inline-block;
  width: 30px;
}

solution

You would use:

#attributes1 .heading_fieldset, #attributes2 .heading_fieldset {
  display:inline-block;
  width: 30px;
}

You were trying to add the properties to the elements: #attributes1, and .heading_fieldset with a parent of #attributes2.


I don’t know the full context of what you are trying to do, so this might not work - however, you could probably just apply those properties to .heading_fieldset without having to select the parent. That will reduce some of the redundancy.