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 sele         


        

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 { /* ... */ }
}