0

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>
Johannes
  • 64,305
  • 18
  • 73
  • 130
darksoulsong
  • 13,988
  • 14
  • 47
  • 90

0 Answers0