Where can I find the CSS rule related to an element in Firebug?

Question

I'm going over Frontify and I want to inspect an element in Firebug. The element is <div class="mod mod-header fixed open">.

When selecting that element in Firebug's HTML panel, usually you expect to see the styles in the Styles side panel. I see .mod-header listed there but not .fixed or .open. I want to see what these classes do. Why can't I see them?

EDIT: You have to scroll down or click the menu to see those classes.

Answer 1

.fixed is being used as what I would refer to as a scoping selector. A scoping selector may have it's own styles but it's also used to control where it and related CSS selectors can affect other elements. You'll often see modules/components use this approach.

If you look at the first child element of <div class="mod mod-header fixed"> you'll see <div class="row header">. Select that element in your inspector. You'll now notice how .fixed is being used. You'll see the following CSS selector in the inspector window.

.mod-header.fixed .header {
    z-index: 10;
    padding: 15px 0;
    max-width: 100%;
    box-shadow: 0 1px 5px rgba(0,0,0,.1);
}

So .fixed and .open are being used to control child elements rather than the element that they're applied to.

It can often be easier to add a single class to the outer most element and setup your CSS selectors accordingly to re-style child elements instead of finding a handful of elements and applying a class to each.