Color coding (grey color) in Styles Window

Just wondering if I'm understanding how the Styles window is color coding the text in the classes/id's. I'm thinking that when I see the gray colored text in the classes that it means that class is not used in the element, or the part of the element, that you have selected in the HTML pane or Visual window. Is this correct? For instance this one and many like it have parts of it grayed out, but some of it is not, the parts grayed out at this moment that I'm looking at it are bolded below:

.container-fluid > .navbar-collapse, .container-fluid > .navbar-header, .container > .navbar-collapse, .container > .navbar-header { margin-right: -10px; margin-left: -10px; }

Am I assuming correctly that the bold items above are not being used in the HTML that is selected at the moment? Or if I'm not understanding this correctly can someone please explain what that means? Thanks :)

Might be easier to think of it as, the classes that are in BLUE are the classes that inherit the styling. And the inheritance in the STYLE tab is in reverse to the CSS rules.

For instance we developers write top / down

html{ // in BLUE (html)
     font-size: 10px;
     -webkit-tap-hightlight-color: rgba(0,0,0,0);
}

html{ // in BLUE (html)
     font-family: sans-serif;
     -webkit-text-size-adjust: 100%;
     -ms-text-size-adjust: 100%;
}

body{ // in BLUE (body)
    font-family: "Helvetica Neue",Helvetica ,Arial,sans-serif;
    font-size: 14px;
    line-height: 1.42857143;
    color: #333;
    background-color: #fff;
}

*{ // in BLUE (*)
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

.h2, h2{ // in BLUE (h2)
    font-size: 30px;
}

.h1, .h2, .h3, h1, h2, h3{ // in BLUE (h2)
    margin-top: 20px;
    margin-bottom: 10px;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6{ // in BLUE (h2)
    font-family: inherit;
    font-weight: 500;
    line-height: 1.1;
    color: inherit;
}

The app will show you the inheritance in reverse which looks like

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6{ // in BLUE (h2)
    font-family: inherit;
    font-weight: 500;
    line-height: 1.1;
    color: inherit;
}

.h1, .h2, .h3, h1, h2, h3{ // in BLUE (h2)
    margin-top: 20px;
    margin-bottom: 10px;
}

.h2, h2{ // in BLUE (h2)
    font-size: 30px;
}

*{ // in BLUE (*)
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

* body{ // in BLUE (body)
    font-family: "Helvetica Neue",Helvetica ,Arial,sans-serif;
    font-size: 14px;
    line-height: 1.42857143;
    color: #333;
    background-color: #fff;
}

html{ // in BLUE (html)
     font-family: sans-serif;
     -webkit-text-size-adjust: 100%;
     -ms-text-size-adjust: 100%;
}

html{ // in BLUE (html)
     font-size: 10px;
     -webkit-tap-hightlight-color: rgba(0,0,0,0);
}

Does this make sense?

Saj