CSSを解除する

このサイトでは共通のCSSを各ページに適用し、必要によってはページ内でCSSを上書きして使っています。
CSSをタグに設定すると、全てのタグに設定が行き渡ってしまいますが、HTMLのサンプルを作る場合、その見本部分ではCSSを解除する必要があります。

このように、CSSを設定したけれど、部分的に解除したい場合にプロパティを初期値に戻す方法があります。

簡単なCSSを使って、共通のサンプルテキストを用意しましす。

サンプルテキスト

.sample_text {
	color: #f00;
	font-size: 20pt;
	text-shadow: 2pt 2pt 2pt #09f;
}

<span class="sample_text">サンプルテキスト</span>

表示するサンプルテキストには今回<span>タグを使ってsample_textクラスを指定しています。

適用したスタイルを変更するには値の上書きがあります。
ここでは、初期値を表す「initial」を使って、ブラウザの標準値で上書きをするという手法です。
sample_textクラスの後にclear_textクラスを適用しています。

サンプルテキスト

.clear_text {
	color: initial;
	font-size: initial;
	text-shadow: initial;
}

<span class="sample_text clear_text">サンプルテキスト</span>

ブラウザの標準値で上書きするため、設定済みのプロパティと同じものが必要になります。

また、Firefoxでは接頭辞「-moz-」が必要という情報もありましたが、現時点ではなくても表示できました。設定時に接頭辞が必要なプロパティでは必要になるかもしれません。その場合、「-moz-initial」と表記します。

サンプルテキストでは、<span>タグ内に２つのクラスを指定しています。

上記では設定時も解除時もクラスを使いました。
この他に想定するのは、タグでの指定、IDでの解除です。

タグを指定してCSSを設定し、クラスを使って解除する事例です。

h1 {
	color: #f00;
}
.clear_text {
	color: initial;
}

<h1 class="clear_text">サンプルテキスト</span>

クラスでCSSを設定し、IDを使って解除する事例です。

.sample_text {
	color: #f00;
}
#clear_text {
	color: initial;
}

<span class="sample_text" id="clear_text">サンプルテキスト</span>

Internet Explorer 10では、機能しませんでした。