CSS declaration "stack" issues

[jorelemondos]

HI fellow firebuggers,

I would like to understand why, on a site with bootstrap (twitter) installed, I see random CSS declarations that are always "above" my own style declarations. So I always have to scroll down to see my own work. Is there a way to change this? Thanks!

[Sebastian Zartner]

Looks like this question got missed.

Those rules are at the top, because they are referring to pseudo-elements, in this case ::before and ::after. Those are always shown at the top and there is currently (Firebug 2.0.x) no way to hide them.

This will change with Firebug 3, which integrates itself into the Firefox DevTools. Those tools display the pseudo-elements as separate nodes within the tree view at the left side. So the pseudo-element CSS rules are just shown when you click those nodes.

See the following screenshot as an example for how this looks like:

Sebastian