Comment appliquer un style css à une classe qui ne contient pas de sous-classe

Question

Je dois définir un style sur la div dans la première classe faq-category-group sans affecter le style du groupe faq-category à l'intérieur un faq-category-indent. Comment cela peut-il être fait?

Les classes sont générées automatiquement par un module PHP, donc changer les noms de classe pour faciliter les sélecteurs n'est pas une 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

Par cette structure, sélectionnez uniquement les groupes qui sont des enfants de <div class="faq"> et appliquer les styles que vous ne voulez pas appliquer à des groupes dentelées. Les groupes contenus dans <div class="faq-category-indent"> ne seront pas affectés.

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

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

Cela suppose que vous ne vous souciez pas de IE6, bien sûr. Dans le cas contraire, une autre solution plus bavard est la suivante:

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

Voici un jsFiddle example qui couvre les deux cas.

Answer 2

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

devrait fonctionner

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

Answer 3

Vous devez indiquer la différence dans les classes individuellement:

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

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

Cela forcera celui à style selon les parents .faq et l'autre selon le parent .faq-category-indent.