css - How best to handle styles for nested h1's in html5? -

i'm working on html5 themes few of websites, , keep running problems way <h1>'s can used multiple times. can't seem predict in elements headings show up, want try , size them automatically based on position in dom...

i thinking using like

h1 { font-size: 3em; } h2, body > * > header h1 { font-size: 2.5em; } h3, body > * > header h2, body > * > * > header h1 { font-size: 2em; } 

but that's far waterproof. having element around h1 doesn't mean it's deeper in page structure tend pick way small sizes. example unordered list blocks each have own title have

<section>   <ul>     <li>       <header>         <h1>title of block</h1>       </header>       content     </li>  </ul> </section> 

which makes <h1> appear deeper is. ways handle this?

you should style h1s based on type of elements in, not depth.

for example, if have general headings, article headings , sidebar item headings, this:

h1 { font-size: 3em } h2 { font-size: 2.5em } article h1 { font-size: 2em } article h2 { font-size: 1.5em } aside h1 { font-size: 2.5em } 

you use whatever selector use select articles or sidebar layout (in example, article , aside tags, might section.sidebar or else) differentiate between different h1 tags.

there not of connection between depth of tag, , size (although there seems pattern; deeper smaller). there connection between convention used marking sidebar, , size of headings in sidebar. css selectors headings match selectors layout, shows connection.