Selector de CSS para seleccionar el primer elemento de una clase determinada

Estoy tratando de seleccionar un primer elemento de la clase ‘A’ en un elemento con id o clase ‘B’. Intenté una combinación de selectores de + y primer hijo, ya que no es un primer elemento dentro del elemento de clase ‘B’. Funcionó, pero … estoy tratando de anular algunos CSS por defecto y no tengo control sobre el lado del servidor y parece que el elemento de la clase ‘A’ a veces se genera en una posición diferente. Aquí hay una ilustración:

  might have a different name  structure and element count might differ  our target  this shouldn't be affected  this shouldn't be affected   

A veces, el nombre de la clase ‘B’ difiere y los elementos anteriores a ‘A’ también difieren. Entonces, ¿hay alguna manera de seleccionar la primera aparición de ‘A’ en un elemento ‘C’? Porque la clase ‘C’ siempre está ahí. No puedo usar los selectores +> y primer hijo ya que la ruta al primer elemento ‘A’ es diferente, pero el elemento ‘C’ siempre está ahí y sería un buen punto de partida.

CSS3 proporciona la :first-of-type clase de pseudoclase para seleccionar el primer elemento de su tipo en relación con sus hermanos. Sin embargo, no tiene una :first-of-class clase.

Como solución alternativa, si conoce los estilos predeterminados para sus otros elementos .A , puede usar una regla de anulación con el combinador de hermanos general ~ para aplicarles estilos. De esta forma, de alguna manera “deshacerás” la primera regla.

La mala noticia es que ~ es un selector de CSS3.
La buena noticia es que IE lo reconoce a partir de IE7, como CSS2 > , por lo que si le preocupa la compatibilidad del navegador, el único “navegador principal” en el que falla es IE6.

Entonces tienes estas dos reglas:

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

Cómo se aplican los estilos a los elementos se ilustra a continuación:

 
Content
Content
Content
Content
Content
Content
Content
Content
  1. Este elemento no tiene clase A No se aplican reglas.

  2. Este elemento tiene clase A , por lo que se aplica la primera regla. Sin embargo, no tiene ningún otro elemento similar que ocurra antes, que el selector ~ requiere, por lo que la segunda regla no se aplica.

  3. Este elemento tiene clase A , por lo que se aplica la primera regla. También aparece después de otros elementos con la misma clase bajo el mismo elemento primario, tal como lo requiere ~ , por lo que también se aplica la segunda regla. La primera regla es anulada.