Search code examples
csscss-selectorsdry

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

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

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