Question

So I’ve got the following DOM structure and I’m focusing on the highlighted classes.

I want to change the color of the text “Contributing to Aggregate” white. I placed a ‘marker’ CSS class (called fmg-white) on the top level item (to identify this instance of the element from others on the page). And I created a second CSS rule (.x4-form-field .fmg4-html-box .fmg-white) which I thought would use the ‘marker’ class in conjunction with the lower level applied classes (.x4-form-field .fmg4-html-box) to specifically target the text in the DIV. But that’s not happening…
(the markup is being emitted by extjs4)

Any help is appreciated.

.fmg-white
{
    /* marker */
}

.x4-form-field .fmg4-html-box .fmg-white
{
    color: White !important;
}

Answer 1

You are applying your selector incorrectly:

.fmg-white .x4-form-field.fmg4-html-box
{
    color: White !important;
}

.fmg-white is the ancestor of the div.x4-form-field.fmg4-html-box

If the item you want has multiple classes, you chain them instead of spacing them out.

A space (between two selectors) indicates that the next item will be a descendant of the previous.

I.E. html div will style all divs on a page but #myDiv div will only style divs that are descendants of #myDiv