Есть ли способ нацелить несколько классов с одинаковыми элементами

Question

У меня есть стиль для формы, фрагмент которого находится здесь:

input[type="text"], input[type="tel"], input[type="password"], input[type="email"], textarea, select {
   height: 40px;
   padding:  10px;
}

Я хочу использовать этот стиль в нескольких различных формах (но не во всех) на сайте.У каждого есть свой идентификатор, например, один .node-825, а другой - .node-826.Я хочу знать, есть ли удобный способ использовать мою таблицу стилей для нацеливания на все формы.

Я понимаю, что могу сделать следующее:

.node-825 input[type="text"], .node-825 input[type="tel"], .node-825 input[type="password"], .node-825 input[type="email"], .node-825 textarea, .node-825 select, 
.node-826 input[type="text"], .node-826 input[type="tel"], .node-826 input[type="password"], .node-826 input[type="email"], .node-826 textarea, .node-826 select {
    height: 40px;
    padding:  10px;
}

Это работает, но давайте будем честными, это очень грязно и кажется ненужным, должен быть аккуратный способ сделать это, не повторяя себя снова и снова.Есть около 10 форм, на которые мне нужно ориентироваться, поэтому кажется неправильным, что мне придется повторять вышеупомянутые селекторы 10 раз только с одним изменением класса каждый раз.

Я ищу что-то вроде этого:

.node-825, .node-856(input[type="text"], input[type="tel"], input[type="password"], input[type="email"], textarea, select) {
    height: 40px;
    padding:  10px;
}

Выше не работает, но это то, к чему я стремлюсь.Хотя я заметил похожие вопросы на этот вопрос, ни один из них, похоже, не является тем же и отвечает на то, что я пытаюсь сделать.

Это основной формат HTML со всеми удаленными словами, чтобы дать вам представлениемакета каждой формы.

<div id="node-825" class="blog-single-post node node-webform clearfix">
   <input type="text">
</div>

Answer 1

Как насчет использования шаблона внутри селектора CSS:

[class^=node-] {
    color: red;  
}

Это выбирает все элементы с классом, начинающимся с 'node -'.

Answer 2

Вы можете просто добавить общий класс ко всем тегам формы, на которые вы хотите повлиять, и использовать этот один класс в селекторе вместо повторения правил с несколькими идентификаторами.

<form id="node-825" class="layout_1">
  ...
</form>
<form id="node-826">
  ...
</form>
<form id="node-827" class="layout_1">
  ...
</form>

...и в CSS

.layout_1 input[type="text"], 
.layout_1 input[type="tel"], 
.layout_1 input[type="password"], 
.layout_1 input[type="email"], 
.layout_1 textarea, 
.layout_1 select {
   height: 40px;
   padding:  10px;
}

... что повлияет на #node-825 и #node-827, но не #node-826