Firstly, according to the proper usage nested h1's should be treated exactly according to their significance of nesting (including article, aside, nav, section but not any other elements). This is correct behavior. An h1 nested inside a section element should be the same visually as an h2, and an h1 nested inside two section elements should be visually the same as an h3... Basically, in short, there's an alternative markup floating around that pretty much no-one uses but is really more semantically consistent which is to only use h1 ever, and allow the level of heading to be determined by the document outline.
authors are strongly encouraged to either use only h1 elements, or to
use elements of the appropriate rank for the section's nesting level.
per Section 4.3.11 of WHATWG
So, I believe you're on the right track with wanting this and I think the chosen correct answer is giving you subjective stylistic advice rather than attempting to answer your question, which is a valid one.
As far as implementation:
For webkit browsers (chrome and safari) and firefox you can use the "-moz-any" and "-webkit-any" css pseudoselectors. This is, in fact, how the default stylesheets in firefox and chrome style these elements perfectly according to the standards already:
For example, at level 3 headings in the firefox default css:
h3, *:-moz-any(article, aside, nav, section) *:-moz-any(article, aside, nav, section) h1 {
display: block;
font-size: 1.17em;
font-weight: bold;
margin: 1em 0;
}
This greatly simplifies the answer @Alohci rightly suggested.
The problem is, of course, it wont work in IE. One option is to use a CSS pre-processor, such as SASS. I have written the following snippet in SASS which I use to do my header markup and which I use to effectively normalize across browsers the presentation of nested h1 elements. (If you don't want to actively use a CSS pre-processor you can use one a single time to generate your initial template for these values and then modify the values as needed over time -- it will at least save you tons of typing and eliminate potential errors in the process):
@function bb_permute_lists($left_list, $right_list) {
$permuted_list: ();
@each $left_item in $left_list {
@each $right_item in $right_list {
$permuted_list: append($permuted_list, $left_item $right_item, comma);
}
}
@return $permuted_list;
}
@function bb_html5_header_markup($level) {
@if (1 == $level) {
@return h1;
}
$header_containers: article, aside, nav, section;
$header_markup: $header_containers;
@for $i from 2 to $level {
$header_markup: bb_permute_lists($header_containers, $header_markup);
}
$header_markup: bb_permute_lists($header_markup, h1);
@return append(h#{$level}, $header_markup, comma);
}
This function can be used as follows:
#{bb_html5_header_markup(1)} {
font-size: 2em;
margin: .67em 0;
}
#{bb_html5_header_markup(2)} {
font-size: 1.5em;
margin: .83em 0;
}
Best of luck in trying to implement this alernative standard. There's plenty of documentation out there about this alternative and more-semantic usage of h1, but based on the fact that I could not find anyone else with a code snippet to help me along in implementing it, I think it's rather rarely used (perhaps because people are working with a lot of mixed content, whereas I am starting from scratch).