How to apply css style to a class that does not contain a subclass

Question

I need to set the style in the div in the first class of faq category categories, without affecting the style of the faq category group inside the paragraph of the faq category. How can I do that?

Classes are automatically generated by the PHP module, so changing class names to make selectors easier to select is not 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

In this structure, select only groups that are children <div class="faq">and apply styles that you do not want to apply to indentation groups. 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 */
}

, IE6, . , :

.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.
     */
}

jsFiddle, .

Answer 2

:

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

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

.faq, - .faq-category-indent.

Answer 3

.faq > .faq-category-group {
   /*style*/
}

must work

Source: http://www.w3.org/TR/css3-selectors/