Two parents with the same child css - css

Question

I am surprised this has not come up before. Often times when I am styling my website, I have two parents with the same type of child, say:
form#login-form
and
form#reset-form
And in each of these parents, styling the child:
input[type="submit"]
I would have to do:
form#login-form input[type="submit"], form#reset-form input[type="submit"] {
width: 14.75em;
text-align: center;
font-family: 'Orbitron', sans-serif;
border: none;
}
Surely, there is an easier way to do this in CSS? If not, I have code such as
.sidebar-outer + *:not(:empty), .sidebar-outer + *:empty + *
Where .sidebar-outer is a parent with two children.

Answer 1

Just add a common class to all the input fields
example -
<form id = "login-form">
<input class="common-class" type="submit"/>
</form>
<form id = "reset-form">
<input class="common-class" type="submit"/>
</form>
And under the css class you can have the below -
.common-class{
width: 14.75em;
text-align: center;
font-family: 'Orbitron', sans-serif;
border: none;
}

Answer 2

SASS is like CSS on steroids. Just search for "SASS CSS". That said, the best practice way to use it is to start using NPM+Webpack ... worth the learning effort. With SASS you can do something like:
#mixin myinputbuttonstyles {
width: 14.75em;
text-align: center;
font-family: 'Orbitron', sans-serif;
border: none;
}
form#login-form, form#reset-form {
input[type="submit"] {
#include myinputbuttonstyles;
}
}
This sample shows 2 features of SASS: nesting and mixins.