[whatwg] Sections, headers, and styling
Tab Atkins Jr.
jackalmage at gmail.com
Tue Nov 11 15:41:48 PST 2008
On Tue, Nov 11, 2008 at 5:33 PM, Eduard Pascual <herenvardo at gmail.com>wrote:
> It is a quite common practice on current web pages to style the h1..h6
> elements to have them blend properly with the overall style of a site.
> For HTML4/XHTML1 documents this is quite trivial; but with HTML5 the
> "number part" of the heading element doesn't reliably define the
> actual heading level anymore (specially when dealing with server-side
> includes and / or user-provided content). I have tried to figure out
> some CSS selectors to handle this task with HTML 5 documents and they
> go completely crazy before getting anywhere near to being accurate:
> there is an insane ammount of element-nesting combinations to keep
> track of. Is there any sane way to deal with this basic need?
Generally you want to decide if you're going to use the numbered range, or
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.
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.
-------------- next part --------------
An HTML attachment was scrubbed...
More information about the whatwg