Reset the rem or font-size only for all the elements inside a particular div

user_7267866 0
Viewed 4163

I've a typical HTML structure as shown in the code below.

<div class="common-parent">
  <div class="parent>
    <div class="child">
      <h2>Child 1</h2>
      <span>Some text here...</span>
    </div>
    <div class="new-child">
      <h2>New Child</h2>
      <div>
        <span>Some text here...</span>
      </div>            
    </div>
  </div>
</div>

Now, I need to change the font-size or the rem size of all the elements inside the div.parent including itself.

Since the default rem size is equal to 16px, I need to reduce it to 12px that is 75%. I can't change it on 'html' tag as it will affect all the other elements as well.

How do I change it only for 'div.parent' and all the elements inside that using SCSS or CSS?

font-size sass css
3 Answers

The CSS length unit 'rem' means 'Root EM' and it always depends on the root element <HTML>. So if you want a font size depending on a particular parent element's font-size settings, you may use other units like em or percentage.

user_30743020

If you can live with a solution that works on all browsers except Firefox, use this:

.parent {
    zoom: 0.75;
}

For Firefox, use quirks like:

.parent {
    transform: scale(0.75);
    transform-origin: top left;
    width: 133.33%;
}
user_20683620

Just use a pixel measurement to "reset" the base font-size:

.common-parent div.parent{
    font-size: 12px;
}

Then, each element contained in .common-parent div.parent will read 1em as 12px.

Note: Normally you shouldn't mix pixel units with ems, but for resetting base font-sizes, it's a justified solution.

Admin1
Related