Beginners Guide To Understanding CSS Specificity

Heads up! this post was created when Microthemer was at version 3. The current version is 7. Some references to the interface may be out of date.

This tutorial will address the concept of ‘CSS Specificity’ in relation to Microthemer; the WordPress Theme customizing plugin for newbies and designers/developers. The information here is mainly for the benefit of non-CSS coders that may be puzzled as to why the styles they apply in Microthemer don’t always seem to have any effect.

Note: if what follows is all a bit too techy for you, don’t despair. You can save yourself having to understand the intricacies of ‘CSS Specificity’ by going to Microthemer’s Preferences pages and Enabling the ‘Auto-add !important to CSS Styles’ option. This will ensure that Microthemer’s styles override your theme’s styles 90% of the time.

For those of you that are keen/willing to learn a bit about CSS please read on. The good news is that ‘CSS Specificity’ is actually quite straight forward. It basically means this:

If two or more CSS style rules are in conflict with each other, the winner is the one that is most ‘specific’.

But what makes a style rule more or less specific? Well this is where we need to start talking about HTML and CSS selector code. Here is some example HTML code for a link:
<a href="" id="themeover-link" class="homepage-link">Click me</a>
And here are 3 example CSS Selectors that set the text color of the link:
a { color: red }
a#themeover-link { color: blue }
a.homepage-link { color: green }

So if all 3 of these style rules are present, what color will the link be? The short answer is “blue”. It just so happens that this:
Is more ‘specific’ than this:
Or this
Why? Because it references the id attribute of the HTML link and in CSS, ids are considered more specific than classes or not referencing any id or class attribute (as with the very simple ‘a’ selector).

The specificity of a selector can actually be quantified. When an id is referenced (by use of the ‘#‘ character) this counts for 100 specificity points. When a class is referenced (by use of the ‘.‘ character) this counts for 10 specificity points. And when an element’s ‘type’ is referenced (e.g. ‘a’) this counts for 1 ‘specificity point’. CSS selectors often have more than one ‘type’, ‘class’, or ‘id’ reference, For instance:
div#header a#themeover-link
This CSS selector would target the link we’ve used in our HTML example above – assuming the link was nested inside of a div element with an id of ‘header’. The total specificity score for this selector would be 202 (two ids are referenced: ‘header’ and ‘themeover-link’ and two element types are referenced: ‘div’ and ‘a’).

Applying This Knowledge to Microthemer

So you’ve applied some style in Microthemer, it hasn’t worked as expected, and so you want to investigate if a CSS Specificity issue has reared it’s ugly head. What can you do? To quickly diagnose the issue, you can simply hover your mouse over the style option you are editing in Microthemer. Microthemer always reports the computed CSS styles on empty style editing fields, or as a hover tooltip on fields that are not empty. So if you set the font-size of a heading to ’30px’ in Microthemer, but when you hover your mouse over the font-size field (after Microthemer has finished saving your settings) and you see that it reports ’21px’, you will know that some other style is more specific than yours and is therefore overriding it.

To overcome CSS specificity issues you may want to recruit the help of your browser’s dev tools.

Right click on the element that you’re unsuccessfully trying to re-style  and then choose ‘Inspect’ or ‘Inspect element’ (depending on the browser). An inspector will popup at the bottom of your screen. And in the right-hand pain it will list all of the CSS selectors acting upon the element in question. It does so in order of specificity, with the most specific selectors listed first. If you scroll down you will likely see some styles with crosses through them. This is the inspector telling you that the styles are not taking effect because other style rules are overriding them (due to being more specific). You may well see that your style rule (which will be in active-styles.css) has a cross through it. This would confirm that the issue is indeed due to CSS specificity. To overcome the issue you have 3 options, 2 of which don’t require a deep understanding of constructing the correct CSS Selector syntax.

Option 1: Scroll up to the top of the the inspector’s CSS pane, copy the CSS selector that is ‘winning’ (this is the bit  of text before the curly braces), click the ‘Modify Selector’ link for the Selector you’re having trouble with in Microthemer, paste the code you copied in the CSS code field (replacing what’s currently there) and finally click the ‘Update’ button. Try saving your settings again to see if that fixes the problem. Note: the CSS selector code you copy can be exactly the same as the selector used elsewhere (as opposed to being more specific) because Microthemer styles are processed after your Theme’s styles, and when two CSS selectors are equally specific the latter one takes precedence.

Option 2: If you haven’t set Microthemer to always apply ‘!important’ to all styles, you can set ‘!important’ on a per-style basis. Simply click the faint ‘i’ next to the input field for the style rule that isn’t taking effect. Microthemer will apply the ‘!important’ CSS declaration  to the style rule. The ‘!important’ declaration will make your style rule override any other selector regardless of specificity score (but specificity score does come back into play if the competing style also has !important).

Option 3: Make your CSS selector more specific by manually adjusting your CSS selector. This will require an understanding of CSS syntax. You can always ask for help in our forum if you get stuck.

So there we have it – that’s CSS Specificity for you. Not so hard after all (hopefully)!