Different <h1> size inside <article>, <aside>, <nav> and <section>

Google Chrome has a special pseudoclass :-webkit-any which is used by default to assign CSS values for font-size property to a group of elements: <article>, <aside>, <nav> and <section>.

:-webkit-any(article,aside,nav,section) h1 { font-size: 1.5em;
 }

The same effect in Firefox is achieved via :-moz-any() pseudoclass.

The value assigned to above mentioned elements is 1.5em, which differs from default value for <h1> which is 2em., thus making <h1> appear of the same size as <h2>.

If we have a <h1> for example inside a <article> and <article> inside a <section> element, the font-size of <h1> will be even smaller (1.17em) .

This behavior doesn’t apply to <h2>, <h3>, <h4>, <h5> and <h6>.

In order to keep font-size for <h1> consistent, we can override the above rule with:

h1 { font-size: 2em; }