Sélecteur CSS pour sélectionner le premier élément d'une classe donnée

Question

J'essaie de sélectionner un premier élément de classe 'A' dans un élément avec id ou classe 'B'. J'ai essayé une combinaison de sélecteurs> + et first-child, car ce n'est pas un premier élément à l'intérieur de l'élément de classe 'B'. Cela a fonctionné, mais ... j'essaie de surcharger certains CSS par défaut et je n'ai aucun contrôle sur le côté serveur et il semble que l'élément de classe 'A' soit parfois généré dans une position différente. Voici une illustration:

<class-C> 
    <class-B> might have a different name 
     <some-other-classes> structure and element count might differ 
     <class-A></class-A> our target 
     <class-A></class-A> this shouldn't be affected 
     <class-A></class-A> this shouldn't be affected 
    </class-B> 
</class-C> 

Parfois, le nom de la classe diffère « B » et les éléments avant « A » diffèrent aussi bien. Alors est-il possible de sélectionner la première occurrence de 'A' dans un élément 'C'? Parce que la classe 'C' est toujours là. Je ne peux pas utiliser les sélecteurs +> et first-child puisque le chemin vers le premier élément 'A' diffère, mais l'élément 'C' est toujours là et ce serait un bon point de départ.

Merci pour l'aide

Answer 1

CSS3 fournit la pseudo-classe :first-of-type pour sélectionner le premier élément de ce type par rapport à ses frères et sœurs. Cependant, il n'a pas de pseudo-classe :first-of-class. Pour contourner le problème, si vous connaissez les styles par défaut de vos autres éléments .A, vous pouvez utiliser une règle de remplacement avec le combinateur général ~ pour leur appliquer des styles. De cette façon, vous sortez "annuler" la première règle.

La mauvaise nouvelle est que ~ est un sélecteur CSS3. Les bonnes nouvelles sont que IE le reconnaît à partir de IE7, comme le > de CSS2, donc si vous êtes inquiet au sujet de la compatibilité du navigateur, le seul "navigateur majeur" est IE6.

Vous avez donc ces deux règles:

.C > * > .A { 
    /* 
    * Style every .A that's a grandchild of .C. 
    * This is the element you're looking for. 
    */ 
} 

.C > * > .A ~ .A { 
    /* 
    * Style only the .A elements following the first .A child 
    * of each element that's a child of .C. 
    * You need to manually revert/undo the styles in the above rule here. 
    */ 
} 

Comment les styles sont appliqués à des éléments est illustré ci-dessous:

<div class="C"> 
    <!-- 
    As in the question, this element may have a class other than B. 
    Hence the intermediate '*' selector above (I don't know what tag it is). 
    --> 
    <div class="B"> 
     <div class="E">Content</div> <!-- [1] --> 
     <div class="F">Content</div> <!-- [1] --> 
     <div class="A">Content</div> <!-- [2] --> 
     <div class="A">Content</div> <!-- [3] --> 
    </div> 
    <div class="D"> 
     <div class="A">Content</div> <!-- [2] --> 
     <div class="E">Content</div> <!-- [1] --> 
     <div class="F">Content</div> <!-- [1] --> 
     <div class="A">Content</div> <!-- [3] --> 
    </div> 
</div> 

1. Cet élément n'a pas encore de classe A. Aucune règle n'est appliquée.

2. Cet élément a la classe A, la première règle est donc appliquée. Cependant, aucun autre élément de ce type ne se trouve devant le sélecteur ~. Par conséquent, la deuxième règle est et non.

3. Cet élément a la classe A, la première règle est donc appliquée. Il vient également après d'autres éléments avec la même classe sous le même parent, comme requis par ~, donc la deuxième règle est également appliquée. La première règle est surchargée.