Как применить стиль CSS к классу, который не содержит подкласс

Question

Мне нужно установить стиль для div в первом классе faq-category-group, не затрагивая стиль группы faq-category-indent в faq-category-indent. Как это можно сделать?

Классы автоматически генерируются модулем PHP, поэтому изменение имен классов для упрощения селекторов не вариант.

<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

По этой структуре выберите только те группы, которые являются потомками <div class="faq">, и примените стили, которые вы не хотите применять к отступным группам. Группы, содержащиеся в <div class="faq-category-indent">, не будут затронуты.

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

должно работать

Источник: http://www.w3.org/TR/css3-selectors/