How do I apply a css style to a class that doesn't contain a subclass

Question

I need to set a style on the div in the first faq-category-group class without affecting the style of the faq-category-group inside a faq-category-indent. How can this be done?

The classes are auto-generated by a PHP module, so changing the class names to make the selectors easier isn't an option.

<div class="faq">
    <div class="faq-category-group">Content</div>

    <div class="faq-category-indent">
        <div class="faq-category-group">Content</div>
    </div>
</div>

Answer 1

By that structure, select only groups that are children of <div class="faq"> and apply the styles which you don't want applied to indented groups. The groups that are contained in <div class="faq-category-indent"> will not be affected.

.faq .faq-category-group {
    /* Styles for all groups */
}

.faq > .faq-category-group {
    /* Styles for non-indented groups */
}

This assumes you don't care about IE6, of course. Otherwise, another, more verbose solution is this:

.faq .faq-category-group, .faq .faq-category-indent .faq-category-group {
    /* Styles for all groups */
}

.faq .faq-category-group {
    /* 
     * Styles for non-indented groups.
     * Works because .faq .indent .group above is more specific than
     * this one, so the above rule will override this one.
     */
}

Here's a jsFiddle example that covers both cases.

Answer 2

You have to specify the difference in the classes individually:

.faq .faq-category-group
{
    color: #00ff00;
}

.faq .faq-category-indent .faq-category-group
{
    color: #0000ff;
}

This will force the one to be styled according to the parent .faq and the other according to the parent .faq-category-indent.