All geek questions in one place

Override em font-size when elements are nested

How do you override the font-size property when you have nested elements? Using! Important, it seems to have no effect.

div { font-size:6em; } p { font-size:1em !important; } span { font-size:1em; }

-

 <html> <body> <div><span>span</span><p>paragraph</p></div> </body> </html>​

http://jsfiddle.net/dvUTQ/

+4
source share
3 answers

Em are relative sizes to their parent elements.

http://jsfiddle.net/dvUTQ/3/

 div#small { font-size:2em; } div#big { font-size:6em; } p { font-size:.5em; /* effective sizes: big: 3em, small: 1em */ } span { font-size:2em; /* effective sizes: big: 12em, small: 4em */ }

Setting the child to 1em just makes it the same size as its parent. 5em to p in this case will effectively make it 3em.

http://www.w3schools.com/cssref/css_units.asp

+13
source

In addition to dmzza's answer : the !important rule only has an effect when you have a selector in the stylesheet with conflicting specificity .

In your case, there was no conflict, so the !important rule could not have any effect.

If you have conflicting specifics, it is always better to create a more specific selector for the exception.

+5
source

You can use the CSS3 rem module, which refers to the root, not the parent. I am stuck in the same dilemma as the project I am working on has so many nested elements that they are not reliable.

Here you can find more information http://snook.ca/archives/html_and_css/font-size-with-rem .

The only problem is backup browser support for IE8 and below. You still need to provide the pixel size before announcing the edge size. Despite this extra coding, it's still worth a look.

+3
source

Source: https://habr.com/ru/post/1434528/

More articles:


All Articles