Using HTML5 Elements in Tightly-Scoped CSS Selectors

I’ve been using some of the new HTML5 elements in a new web page template. While working on the CSS for the page, I noticed some interesting behavior in Internet Explorer 7 and 8. I have gotten in to the habit of writing very tightly-scoped CSS selectors; so tight, in fact, you would break the rule with the insertion of a single element into the DOM path.

div.businessProfile > ul.profileTools > li.follow > a.twitterLink {...}

So, when I added some of the new elements in to the selector, it looked like this:

div.businessProfile > header > nav > ul.profileTools > li.follow > a.twitterLink {...

This worked fine while I was still developing the page in Chrome. And it looked good in IE 9 as well. But when I checked it in IE 7 and 8, the style rules weren’t getting applied. I realized that the parser for Trident – the IE layout engine – didn’t know what to do with the HTML5 elements, even with the HTML5 DTD.

The quickest solution involves removing the HTML5 elements from the selector (and thus loosening the scope of the definitions’ application).

div.businessProfile ul.profileTools > li.follow > a.twitterLink {...}

Using conditional comments, one could load these definitions selectively for the defective browsers. But, then we’d be left with two separate style sheets to maintain.

Aside from using a CSS framework, or implementing a JavaScript hack, I’d love to find another solution, but I’ve got nothing yet.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.