Can I make this CSS simpler to avoid repeating the parent selector?

Question

A common pattern I come across is the following:

form.request input {
    /* ... */
}

form.request input[type="text"] {
    /* ... */
}

form.request select {
    /* ... */
}

form.request br {
    /* ... */
}

I have several lines beginning with the same selector (form.request), and I want to select various children. Can I do this in a neater way without the repetition (and preferably without additional dependencies like LESS)?

Related question - if all the above comments contain the same styles, can I do better than:

form.request input, form.request input[type="text"], form.request select, form.request br {
    /* ... */
}

Answer 1

No, you cannot. But if you want to do less typing and make the stylesheets more readable, consider using SCSS.

Answer 2

Use LESS, which would let you write

form.request {
  input { /* ... */ }
  input[type="text"] { /* ... */ }
  select { /* ... */ }
  br { /* ... */ }
}

or even

form.request {
  input {
    /* ... */
    &[type="text"] { /* ... */ }
  }
  select { /* ... */ }
  br { /* ... */ }
}