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

Здравствуйте, есть стиль 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>

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