As an example, I want labels and input fields within a certain class to have similar rules.

CSS

<!-- language-all: lang-css -->
.SpecialBox input, label{
    background-color: green;
}

When I use the previous code, what it actually does it apply the rules to any input field within a SpecialBox and ALL labels because the ruleset applies each of the comma separated items:

  • .SpecialBox input
  • label

I can modify the selector to clarify both items individually

.SpecialBox input, .SpecialBox label{
    background-color: green;
}

In which case I get the desired result, but at the expense of being concise

Here's a fiddle to demonstrate

Is there a way to apply a set of rules to all children of a particular selector, or am I forced to repeat the parent element selector?

I believe there is a way to do this with SASS or LESS, but I'd prefer to do this with straight CSS

For only the input and label elements, you would have to repeat the selector.

If you want all children, you can use the wildcard: .SpecialBox * This will apply the style to ALL of the children.