tipos - selectores de atributos css

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

Question

Estoy tratando de seleccionar un primer elemento de la clase ''A'' en un elemento con id o clase ''B''. He probado una combinación de> + y selectores de primer hijo, ya que no es un primer elemento dentro del elemento de clase ''B''. Funcionó, pero ... estoy intentando anular algunos css predeterminados y no tengo control sobre el lado del servidor y parece que el elemento de clase "A" a veces se genera en una posición diferente. Aquí hay una ilustración:

<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>

A veces el nombre de la clase ''B'' difiere y los elementos antes de ''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 porque la ruta al primer elemento ''A'' difiere, pero el elemento ''C'' siempre está ahí y sería un buen punto de partida.

Answer 1

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

Como solución alternativa, si conoce los estilos predeterminados para sus otros elementos .A , puede usar una regla de reemplazo con el combinador de hermanos general ~ para aplicarles estilos. De esta manera, tipo de "deshacer" la primera regla.

La mala noticia es que ~ es un selector 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.

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

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

<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. 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 aparezca antes, lo que requiere el selector ~ , por lo que no se aplica la segunda regla.

3. Este elemento tiene clase A , por lo que se aplica la primera regla. También viene después de otros elementos con la misma clase bajo el mismo padre, según lo requerido por ~ , por lo que la segunda regla también se aplica. La primera regla está anulada.