CSS | visibilityで非表示の親要素の中にある子要素だけ表示する

2021-02-09CSS デザイン,CSS

CSSのvisibilityプロパティを使って非表示の親要素の中で子要素だけ表示する方法を紹介しています。

See the Pen CSS | visibility by yochans (@yochans) on CodePen.

非表示の親要素の中で子要素だけ表示する

CSSで要素を非表示にする方法は「display: none;」「opacity: 0;」などもありますが、これらは親要素で指定した場合は子要素で非表示を解除できません。

「display: none;」「opacity: 0;」は、親要素のプロパティであり、親要素が非表示になっている以上は子要素では解除できないからです。

親要素で非表示にして特定の子要素だけ表示したい場合は、visibilityプロパティを利用します。

visibilityプロパティも要素を非表示にすると、子要素も非表示になりますが、プロパティのスタイルを継承している状態ですので、再指定する事で解除する事が可能です。

上記の動作サンプルでは以下のようにHTML・CSSを記述しています。

<div class="container">
		<p>visibility: hidden;</p>
</div>

.container{
	margin: 30px 0;
	background: #000;
	text-align: center;
	visibility: hidden;
}

.container p{
	color: #b22222;
	visibility: visible;
}

親要素は表示されませんので、親要素の背景色は表示されていませんが、子要素の<p>タグにあるテキストは表示されている事がわかります。

また、visibilityは継承プロパティですのでinitialで継承を解除する事もできます。

.container p{
	color: #b22222;
	visibility: initial;
}