CODEWITHSUNDEEP
css
Kunal
Kunal

Reputation: 500

Override parent element fixed font size with a non-fixed font size

Can I override the fixed font size of a parent element (e.g. div) with a non-fixed font size. I have a problem where for a particular HTML page, I would like the element to use a font size relative to the Body element and not relative to the parent div.

My HTML

<body id="templateBody">
    <div>
         <p>

My CSS

body{
  font-size: 76%
}

div{
  font-size:11px
}

How do I specify a font size for p so that it is relative (%age) of the Body font size and not the fixed div font size? Is there anyway to override the div's fixed font size without changing the div's style? I tried using rem, but it does not work on IE8...

Upvotes: 2

Views: 3259

Answers (2)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201628

You cannot. Once you have set the parent element’s font size, there is no way of referring the font size of the parent’s parent.

The rem unit, in addition to browser support issues, refers to the font size of the root element, which is always the html element in HTML documents. So if the the body font size is set as a percentage, you could indirectly set the p font size as relative to it, but only in the sense of setting it as relative to the root element’s font size.

There is normally little sense in mixing px and % font sizes in a document.

Upvotes: 4

DavidVII
DavidVII

Reputation: 2283

No unfortunately not.

You're going to have to modify the div's font-size.

Upvotes: 0

Related Questions