Question

in the process of updating my html to html5, i noticed that the inheritance behaved a bit strange. i’m not sure why links in the ul li lists have matched css rules with blocks that have nothing to do with it.

eg in screenshot 1 (aside), it takes over styles from the footer (but out of the screenshot also from role=navigation)

in screenshot 2 (footer), it takes of styles from the aside (and also from the screenshot also from role=navigation)

why does it do so?

Answer 1

In you first screenshot the css that gets applied is used on #footer #footerGrid ul li a, a:link,a:visited. By seperating this with comas you are having 3 different css selectors:

• #footer #footerGrid ul li a
• a:link
• a:visited

So this gets applied to the footer section, but also triggers on a:link and a:visited. And the same goes to your 2nd screenshot vice versa !

documentation for that:

• http://msdn.microsoft.com/en-us/library/aa358833%28v=vs.85%29.aspx

Note When grouping selectors, remember that the comma starts an
entirely new selector from the beginning.