|
Jan 16
2012
|
|
|
I'm preparing notes for the html / css class I teach at the Marlboro College Graduate School and at the same time helping a colleague troubleshoot a ready-made Joomla! template.
Needing to override a styling rule, there are many possible ways to make a rule more specific without using !important!
Firebug (Firefox extension) and CSSEdit (part of Espresso package from MacRabbit) are two tools that will help you identify the style rules currently in play. Of course, you could just edit the stylesheet and make changes to the rule directly, but sometimes you want to keep all of your custom styles separate, in which case you may need to increase the specificity of the selector.
If the rule in question targets only a class, i.e. .alert, you could increase specificity by simply adding the element selector, i.e. h1.alert.
Often, though, template stylesheets already are using quite complex selectors.
I made a note to play "Could you be more specific, please?" as a classroom activity for my students -- presenting them with some real-life selectors and analyzing their suggestions for getting more specific.
What's the most elegant solution to the problem?
