CSS | initialで継承されているプロパティのスタイルを解除する

2021-02-092023-09-08CSS デザイン,CSS

CSSのプロパティにinitialを指定する事で継承されているプロパティのスタイルを解除します。

initialで継承スタイルを無効にする

継承されている全てのスタイルを解除するには「all」にinitialを指定します。

all: initial;

それぞれのスタイルを個別に解除する事も可能です。

font-size: initial;

initialで解除されるスタイルは直の親要素からの指定だけではなく、最上層にあたるbodyで指定されたスタイル、「*（アスタリスク）」を使った全指定でのスタイル、加えて自身で指定しているスタイルも解除しますので、表示にはブラウザのデフォルト値が設定されます。

initialで継承を解除できないプロパティ、つまりは元々継承していないプロパティはinitialが効きません。

例えば、「margin」や「padding」「background」などは、その要素でのみ効果があるプロパティと理解しやすいですが、「display」「opacity」なども親要素からの影響は受けていますが、プロパティを継承している訳ではありませんのでinitialで解除する事はできません。

initialは継承可能な特定のプロパティのみを解除しているのではなく、自身のプロパティとして指定しているスタイルは記述以降にinitialを指定した場合は「margin」や「padding」「background」なども含め全て解除されます。

例えば以下のサンプルコードの場合は、pタグに指定されている全てのスタイルが解除されます。

p {
	color: red;
	background: #000;
	font-size: 30px;
	all: initial;
}

CSSの最後に「*（アスタリスク）」で全要素を指定して「all: initial」は全てのCSSが解除されるかと思います。

* {
	all: initial;
}

font・text関連

border関連

list関連

table関連

音声関連

印刷関連

その他

iinheritはinitialで無効にしたスタイルを本来の継承されている状態に戻す事が可能です。

例えば、親要素から継承された複数のスタイルを解除、colorのみを継承したい場合は以下のように記述する事が可能となっています。

div{
	color: red;
	font-size: 30px;
}

p{
	all: initial;
	color: unset;
}

initialで解除した継承を元に戻す事ができるのは、その要素で直接unsetが指定された場合のみになります。

例えば以下のHTML構造だった場合、divから継承されたスタイルをpで解除して、spanで継承を戻すことはできません。

<div>
	<p>
		<span>initial</span>
	</p>
</div>

また、unsetは親要素からの継承に戻す処理となっています。

例えば以下のコードの場合、表示される色は黒（black）となりますので注意します。

div {
	color: black;
}

p {
	color: red;
	all: initial;
	color: unset;
}

Posted by Yousuke.U

まだ、コメントがありません