Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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?

like image 844
Sunny Avatar asked Nov 06 '22 22:11

Sunny


1 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.

like image 180
Pons Purushothaman Avatar answered Nov 15 '22 05:11

Pons Purushothaman