Как перебить преоритетность стилей?

Question

[JavaSscriptNoob]

Всем привет , у меня есть куча классов такого типа :
у меня есть такая структура

<div class="form-input-base__select MuiFormControl-fullWidth">
  <div class="form-input-base__select  form-input-base__input "><div> // этому диву нужно поменять стиль
<div>

.form-input-base__width.MuiFormControl-fullWidth, .form-input-base__width .form-input-base__input, .form-input-base__select.MuiFormControl-fullWidth, .form-input-base__select .form-input-base__input { width : 250px }

нужно создать такой класс ( если не выйдёт через class то можно и id ) который перебил бы этот стиль width
Пробовал уже много вариантов но не выходит ничего сделать . Можно ли что нибудь придумать ? Желательно без important

Comments

[no_one_safe]

А зачем у вас одинаковый класс form-input-base__select на друг друга вложенных элементах? Я не верстак, но даже мне это кажется как минимум странным. Могу ошибаться.

[Виталий Першин]

Смешались в кучу кони, люди..

Answer 1

[Сергей delphinpro]

Берите этот же селектор, располагайте его в конце таблицы стилей или в другом файле, подключенном после имеющегося и пишите там нужную ширину.

Comments

[JavaSscriptNoob]

да,так можно . но если у меня стоит задача при добавлении какого-либо класса что бы он перекрывал эти стили?

[ThunderCat]

JavaSscriptNoob, так же, добавленный в конец стилей класс перебъет вышестоящие.

Answer 2

[Aetae]

Правильный ответ вам написал Сергей delphinpro.

А варианты говнокода:
a) фигачить стилям !important;
b) повысить специфичность добавив body перед классом;
c) повысить специфичность добавив классу :not(.hack) (можно n раз, чем больше - тем селектор круче);
...