Как заменить «*» у before и after?

Question

[Сергей]

Здравствуйте, есть стиль CSS

*, :before, :after {
  box-sizing: border-box;
  transition: 0.4s;
}

Как мне сделать, что мы он применялся только к определенному коду:

<div class="modal-all">
	<div class="modal hidden">
		<div class="form">
			<form>
				<label for="name" required="required">Name</label>
				<input id="name" type="text" />
				<label for="email" required="required">E-mail</label>
				<input id="email" type="email" />
				<label for="pass">password</label>
				<input id="pass" type="password" required="required" />
				<label for="pass">password</label>
				<input id="pass" type="password" required="required" />
				<button type="button">Send</button>
			</form>
		</div>
		<div class="invite">
			<img style="width: 170px;display: block;margin-left: auto;margin-right: auto;" src="/img/iphone.png">
			<div class="close" title="close"></div>
		</div>
	</div>
	</div>

А то из-за того, что стиль применяется ко всей странице возникает много проблем.

Answer 1

[ⓒⓢⓢ]

для всех элементов, включая ".modal-all", будет примерно так:

.modal-all, .modal-all:before, .modal-all:after,
.modal-all *, .modal-all *:before, .modal-all *:after {
  box-sizing: border-box;
  transition: 0.4s;
}

Comments

[Froggyweb]

это ад, в не решение :)

[ⓒⓢⓢ]

Froggyweb, без проблем, напишите ваше решение, посмотрим на ваш "рай" :)

[Froggyweb]

незачем дублировать box-sizing: border-box;
а если поменять у поля ввода имени надо? :) твое полотенце займет пол страницы

[ⓒⓢⓢ]

Froggyweb, моё предложение на "посмотреть ваш рай" ещё в силе, последний раз жду.
потому что "а если то" \ "а если это" - совсем не аргумент... :)

[Froggyweb]

ⓒⓢⓢ, Отличное решение так стили и надо писать. Я пас.

Answer 2

[Антон Шаманов]

.form::before, .modal::after

Comments

[Сергей]

Не помогло.