Могу ли я сделать этот CSS проще, чтобы не повторять родительский селектор?

Question

Мне часто встречается следующая картина:

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

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

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

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

У меня есть несколько строк, начинающихся с одного и того же селектора (form.request), и я хочу выбрать различных дочерних элементов. Могу ли я сделать это аккуратно, без повторений (и желательно без дополнительных зависимостей, таких как LESS)?

Смежный вопрос - если все приведенные выше комментарии содержат одинаковые стили, могу ли я сделать лучше, чем:

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

Answer 1

Нет, вы не можете. Но если вы хотите меньше печатать и сделать таблицы стилей более читабельными, попробуйте использовать SCSS .

Answer 2

Используйте МЕНЬШЕ , что позволит вам написать

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

или даже

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