Ocultar todos los campos personalizados excepto uno en la cola de revisión de aprobación de usuarios

Soporte
1

¿Puede alguien ayudarme con un poco de CSS?

Tenemos muchos Campos Personalizados de Usuario (UCF) en nuestro foro, de los cuales solo uno se utiliza para el registro; este es crítico para decidir la aprobación o no.

Por lo tanto, ahora quiero ocultar todos menos ese (que resulta ser el primero) en la cola de revisión, para que mis pobres moderadores no tengan que ver una serie de campos vacíos para cada aprobación de nuevo usuario.

He llegado hasta aquí:

.reviewable-user-details.user-field{
     display: none;
    /*intento ocultar los UCF en la cola de revisión - por ahora los oculta a todos*/
}

Esto los oculta a todos, pero aún necesito mostrar el primero. He probado con &:nth-of-type(1), pero no funciona aquí; creo que debido a la forma en que funciona el HTML. Los elementos no tienen clases.

¿Alguna sugerencia?

6

He realizado un cambio menor que permitirá que tu CSS &:nth-of-type(1) funcione; teníamos un div contenedor extra que lo impedía. Esto debería estar disponible si actualizas tu sitio en unas pocas horas.

7

¡¡¡Ustedes son increíbles!!! ¡¡¡Gracias!!!

8

Puedo ver que los divs de Ember ya no están, gracias.

Sin embargo, todavía no logro que el CSS funcione y simplemente oculta todos. He probado varias variaciones; quizás estoy haciendo algo tonto. También me pregunto qué pasaría si funciona como pretendo: ¿no se ocultarían todos los campos de la segunda o tercera persona que necesite aprobación?

Aquí está lo que he probado:

.reviewable-user-details.user-field {
    display: none;
            
    &:nth-of-type(1) {
        display: block;
    }
}
9

Ah, cierto, eso no funciona y es esperado… Siempre olvido que nth-of-type se centra en el elemento, no en la clase.

Así que en este caso no hay elemento, solo nombres de clase, por lo que no funciona. Pero si agregas el elemento (div en este caso), entonces solo coincidirá si el primer hermano div también tiene la clase .user-field (no la tiene, porque hay otros div dentro de este padre que aparecen antes que los .user-field).

En resumen… un combinador de hermanos general funciona mejor aquí. Dentro de .reviewable-user-fields, esto selecciona todos los .user-field que son hermanos del primer .user-field.

.reviewable-user-fields .user-field ~ .user-field {
    display: none;
}
10

No tengo ni idea de a qué te refieres, ¡pero funciona de maravilla! ¡Gracias!

Esto puede ayudar a otros con un foro privado que dependen del plugin Custom Wizard al registrarse @Angus.

¿Cómo se podría revelar un segundo o tercer .user-field? No lo necesito (por ahora), pero podría llegar a ser necesario en el futuro.