Скрыть все поля, кроме одного, в очереди проверки одобрения пользователей

Поддержка
1

Может, кто-нибудь поможет мне с CSS?

В нашем форуме много пользовательских полей (UCF), но только одно используется при регистрации; именно это поле критически важно для принятия решения об одобрении или отказе.

Поэтому я хочу скрыть все поля, кроме этого одного (оно, кстати, первое), в очереди на проверку, чтобы мои бедные модераторы не видели кучу пустых полей при одобрении каждого нового пользователя.

Я уже добрался до этого:

.reviewable-user-details.user-field{
     display: none;
    /*попытка скрыть UCF в очереди на проверку — пока скрывает все*/
}

Это скрывает всё, но мне нужно отобразить первое. Я пробовал &:nth-of-type(1), но это не работает — думаю, из-за того, как устроен HTML. У элементов нет классов.

Есть какие-нибудь предложения?

6

Я внес небольшое изменение, которое позволит вашему CSS-селектору :nth-of-type(1) работать корректно. Ранее там присутствовал лишний див-контейнер, который мешал этому. Обновление станет доступно через несколько часов после обновления вашего сайта.

7

Вы, ребята, потрясающие!!! Спасибо!!!

8

Я вижу, что div-элементы Ember теперь исчезли — спасибо.

Однако мне всё ещё не удаётся заставить CSS работать корректно: он просто скрывает всё. Я пробовал несколько вариантов; возможно, я делаю что-то глупое. Также мне интересно, что произойдёт, если это заработает так, как я планирую: не получатся ли у второго или третьего человека, нуждающегося в одобрении, скрыты все поля?

Вот что я пробовал:

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

А, точно, это не сработает, и это ожидаемо… Я всегда забываю, что nth-of-type ориентируется на элемент, а не на класс.

Поэтому в данном случае, поскольку есть только имена классов и нет элементов, это не работает. Но если вы добавите элемент (div в этом случае), то правило сработает только в том случае, если первый соседний div тоже имеет класс .user-field (а он не имеет, потому что внутри этого родителя есть другие div, которые идут перед user-fields).

В общем, если коротко… здесь лучше подойдёт общий селектор соседних элементов. Внутри .reviewable-user-fields он выберет все .user-field, которые являются соседями первого .user-field.

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

Я понятия не имею, о чём вы говорите, но это работает отлично — спасибо!

Это может помочь другим пользователям с приватным форумом, которые полагаются на плагин Custom Wizard при регистрации, @Angus.

Как можно было бы показать второй или третий .user-field? Мне это пока не нужно, но в будущем это может понадобиться.