Hi,

I have just spent 2 hours trying to figure out why the psuedo class 'a:active' would not work on menu list items in my footer. After much head scratching and a bit of research I discovered that Drupal assigns an '.active' class to the 'a' element which overrides a:active. Makes sense now that I think about it it is an easy gotcha to fall into particularly when using the guide at line 210 in html-reset.css for the order of link settings:

/*
 * Links
 *
 * The order of link states are based on Eric Meyer's article:
 * http://meyerweb.com/eric/thoughts/2007/06/11/who-ordered-the-link-states
 */
a:link {
}
a:visited {
}
a:hover,
a:focus {
}
a:active {
}
/*
 * Tables
 *
 * Drupal provides table styling which is only useful for its admin section
 * forms, so we override this default CSS. (We set it back in forms.css.)
 */

The guide is helpful however it might save other users a lot of time if a comment could be placed next to the 'a:active' at line 226 stating for example 'Drupal overrides the a:active pseudo class used in menu items by assiging the class '.active' to the 'a' element. If you want a link menu item to display differently when viewing the page to which it refers use 'li a.active' to target it'.

Thanks

Comments

johnalbin’s picture

Status: Active » Closed (fixed)