jack blank jack blank - 1 year ago 53
HTML Question

where can I find open class in inspector (firebug)?

I'm going over frontify and im trying to inspect the element in firefox and in chrome. The element is

<div class="mod mod-header fixed open">
when I click on that in the html section in fire bug usually you would see the styles in the styles section. I see
in the styles but not
I want to see what these classes do. why can't I see them in the styles section?
EDIT: you have to scroll down or click the menu to see those classes.

Answer Source

.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.