How to parameterize CSS selectors?

Question

May be the question title is bit confusing, but to give a specific example

body.page-status .panel.panel-info .server .dot {
  font-size: 10px;
}

I also want this rule to apply for

body.page-status .panel.panel-info .client .dot {
  font-size:10px;
}

If you see closely, the only difference between 2 selectors is .server and .client

Can I combine them in 1 rule somehow?

Thanks

Answer 1

Use a comma to group selectors:

body.page-status .panel.panel-info .server .dot,
body.page-status .panel.panel-info .client .dot {
  font-size: 10px;
}

If you were using a CSS preprocessor, like LESS, you could use:

body.page-status .panel.panel-info {
  .server, .client {
    .dot {
      font-size: 10px;
    }
  }
}