<HTML CSS> 同じクラス内でも違う島

-html-

<div class="container" >

<h1>プログラミングは</h1>

<p>楽しいぞ</p>

</div>

 

これで文字列を透明にしたいとき私は下記のようにCSSに記入しがちでした。

-CSS-

.container{

opacity: 0.7;

}

しかしこうしてしまうと結果としてcontainerの中の背景まで透明がかってしまいます。

下記の様に分けなければいけません。

-CSS-

.container h1{

opacity: 0.7;

}

.container p{

opacity: 0.7;

}

同じclassの中でもそれぞれの島があるんですね。