Ocultar todos os campos personalizados, exceto um, na fila de revisão de aprovação de usuários

Suporte
1

Alguém pode me ajudar com um pouco de CSS?

Temos muitos Campos Personalizados de Usuário (UCFs) no nosso fórum, dos quais apenas um é usado no cadastro; este é crítico para decidir a aprovação ou não.

Portanto, agora quero ocultar todos, exceto esse (que, por acaso, é o primeiro), na fila de revisão, para que meus moderadores não precisem ficar olhando uma série de campos vazios para cada aprovação de novo usuário.

Cheguei até aqui:

.reviewable-user-details.user-field{
     display: none;
    /*tentativa de ocultar UCFs na fila de revisão - no momento, oculta todos*/
}

Isso oculta todos eles, mas ainda preciso exibir o primeiro. Tentei &:nth-of-type(1), mas não funcionou aqui — acho que devido à forma como o HTML funciona. Os elementos não têm classes.

Alguma sugestão?

6

Fiz uma pequena alteração que permitirá que seu CSS :nth-of-type(1) funcione; tínhamos um div contêiner extra lá que o impedia. Isso deverá estar disponível se você atualizar seu site em algumas horas.

7

Vocês são incríveis!!! Muito obrigado!!!

8

Consegui ver que as divs do Ember sumiram — obrigado.

No entanto, ainda não consigo fazer o CSS funcionar; ele apenas esconde todos eles. Já tentei várias variações; talvez eu esteja fazendo algo bobo. Além disso, me pergunto o que aconteceria se funcionasse como estou pretendendo: não ficariam todos os campos do 2º ou 3º pessoa que precisa de aprovação escondidos?

Aqui está o que tentei:

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

Ah, certo, isso não funciona e é esperado… Eu sempre esqueço que nth-of-type foca no elemento, e não na classe.

Então, neste caso, não há elemento, apenas nomes de classe, por isso não está funcionando. Mas, se você adicionar o elemento (div neste caso), ele só corresponderá se o primeiro irmão div também tiver a classe .user-field (o que não acontece, pois há outros divs dentro deste pai que vêm antes dos user-fields).

De qualquer forma, resumo da ópera… um combinador de irmão geral funciona aqui no lugar. Dentro de .reviewable-user-fields, isso seleciona todos os .user-field que são irmãos do primeiro .user-field.

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

Não faço ideia do que você está falando — mas funciona perfeitamente; obrigado!

Isso pode ajudar outros com um fórum privado que dependem do Plugin Custom Wizard no cadastro @Angus.

Como alguém revelaria um segundo ou terceiro .user-field? Não preciso disso (no momento), mas pode se tornar necessário no futuro.