On Tue, Nov 11, 2008 at 5:33 PM, Eduard Pascual <span dir="ltr"><<a href="mailto:herenvardo@gmail.com">herenvardo@gmail.com</a>></span> wrote:<br><div class="gmail_quote"><blockquote class="gmail_quote" style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;">
It is a quite common practice on current web pages to style the h1..h6<br>
elements to have them blend properly with the overall style of a site.<br>
For HTML4/XHTML1 documents this is quite trivial; but with HTML5 the<br>
"number part" of the heading element doesn't reliably define the<br>
actual heading level anymore (specially when dealing with server-side<br>
includes and / or user-provided content). I have tried to figure out<br>
some CSS selectors to handle this task with HTML 5 documents and they<br>
go completely crazy before getting anywhere near to being accurate:<br>
there is an insane ammount of element-nesting combinations to keep<br>
track of. Is there any sane way to deal with this basic need?<br>
</blockquote></div><br>Generally you want to decide if you're going to use the numbered range, or just <h1>.<br><br>If the former, just work it like you always would. If the latter, you have to do something like "h1 ~ section h1" to match what would otherwise be an h2. This will also match deeper headings, of course, so you want to put in the h3-equivalent selector as well, and possibly further.<br>
<br>However, this is an interesting problem in general, that is perhaps best served by CSS itself. Perhaps something like a :heading(n) pseudoclass, which'll match headings of the given level. What qualifies as a heading, and how they nest and change levels, would be up to the markup language (html5 in this case). Vanilla html4 would just naively report <h1> as matching :heading(1), <h2> as matching :heading(2), etc. Html5 would match according to the heading-depth algorithm, and take into account both the <hn> number and the depth within <section>s.<br>
<br>~TJ<br>