Con CSS solamente: Seleccione la primera aparición de la clase a través de todo el documento

Question

Tenemos un DOM como esto:

<div class="outer"> 
    <div class="inner"> <!--// No "copyright" in this node //--> 
     <div class="content">...</div> 
    </div> 
    <div class="inner"> 
     <div class="content">...</div> 
     <div class="copyright">...</div> <!--// DISPLAY THIS ONE //--> 
    </div> 
    <div class="inner"> 
     <div class="content">...</div> 
     <div class="content">...</div> 
     <div class="content">...</div> 
     <div class="copyright">...</div> <!--// Hide this one //--> 
    </div> 
    <div class="inner"> 
     <div class="content">...</div> 
     <div class="content">...</div> 
     <div class="copyright">...</div> <!--// Hide this one too, etc. //--> 
    </div> 
    <!--// etc. //--> 
</div> 

Todos los elementos con class "derecho de autor" se debe ocultar, con excepción del primero de todos.

Intentamos aplicar este approach, pero desafortunadamente sin éxito. Debe ser una solución CSS única. ¿Alguna idea?

Gracias por su ayuda!

Answer 1

En este caso, cada .copyright es el primero y único de este tipo en .inner, por lo que debe seleccionar por .inner en su lugar. Si no necesita aplicar ninguna regla especial al primer hijo, no necesita usar el enfoque que describo en esa otra pregunta; simplemente usar esto para ocultar los otros elementos:

.inner ~ .inner .copyright { 
    display: none; 
} 

Answer 2

prueba este JSfiddle

div.inner > .copyright { display:none; } 
div.inner:first-child .copyright { display:block; background:#000; }