I need the .list
font-size to be related to the main container. I set it to 62.5% and added a 1.5em font-size
to .list
, but this setup is increasing the text size from the nested .list
items as well.
I'm trying to accomplish the same behavior we have for rem units, but being able to use containers different from body
.
Is this possible?
.container {
font-size: 62.5%;
}
.list {
font-size: 1.5em;
}
<div class="container">
<ul class="list">
<li>
<div>
<div>
<strong>Free</strong> as a bird
</div>
</div>
<ul class="list">
<li>
<div>
<div>
<strong>Free</strong> as a bird
</div>
</div>
<ul class="list">
<li>
<div>
<div>
<strong>Free</strong> as a bird
</div>
</div>
<ul class="list">
<li>
<div>
<div>
<strong>Free</strong> as a bird
</div>
</div>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>