Двое родителей с одним и тем же ребенком

Question

Я удивлен, что до этого не дошло. Часто, когда я оформляю свой сайт, у меня есть два родителя с одним и тем же типом ребенка, скажем:

form#login-form

и

form#reset-form

И у каждого из этих родителей стилизацияchild:

input[type="submit"]

Мне нужно было бы сделать:

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;
}

Конечно, есть более простой способ сделать это в CSS? Если нет, у меня есть код, такой как

.sidebar-outer + *:not(:empty), .sidebar-outer + *:empty + *

, где .sidebar-outer - родитель с двумя детьми.

Answer 1

Просто добавьте общий класс ко всем полям ввода, например -

<form id = "login-form">
  <input class="common-class" type="submit"/>
</form>
<form id = "reset-form">
  <input class="common-class" type="submit"/>
</form>

А под классом css вы можете получить следующее -

.common-class{
    width: 14.75em;
    text-align: center;
    font-family: 'Orbitron', sans-serif;
    border: none;
}

Answer 2

SASS - это как CSS на стероидах. Просто найдите "SASS CSS". Тем не менее, лучший способ использовать его - это начать использовать NPM + Webpack ... стоит усилий по обучению. С помощью SASS вы можете сделать что-то вроде:

@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; 
}

}

В этом примере показаны 2 функции SASS: вложение и смешивание.