ユーザー承認レビューキューで、1 つのカスタムフィールドを除くすべてのフィールドを非表示にする

サポート
1

CSSのサポートをお願いします。

当フォーラムには多くのユーザーカスタムフィールド（UCF）があり、そのうちサインアップに使用されるのは1つだけです。このフィールドは、承認の可否を判断する上で非常に重要です。

そのため、レビューキューでは最初の1つ（たまたま先頭にあるもの）を除くすべてのフィールドを非表示にしたいと考えています。そうすれば、私の担当モデレーターが新しいユーザーの承認時に多くの空のフィールドを見る必要がなくなります。

ここまで進みました：

.reviewable-user-details.user-field{
     display: none;
    /*レビューキュー内のUCFを非表示にする試み - 現時点ではすべて非表示になっています*/
}

これですべて非表示になりましたが、最初の1つは表示させる必要があります。:nth-of-type(1)を試してみましたが、HTMLの構造のせいか、ここでは機能しません。要素にクラスが付いていないためです。

何か良い案はありますか？

6

&:nth-of-type(1) の CSS が機能するように、小さな変更を加えました。以前は、それを妨げる余分な親 div 要素が含まれていました。数時間以内にサイトを更新すれば、この変更が反映されるはずです。

7

皆さん、本当にすごい！ありがとう!!!

8

Ember の div が消えたのが確認できました。ありがとうございます。

しかし、CSS がまだ機能せず、すべてが隠されてしまいます。いくつかのバリエーションを試しましたが、私が何か間違ったことをしているのかもしれません。また、私が目指している通りに動作した場合、どうなるのか気になります。承認を必要とする 2 番目や 3 番目の人のすべてのフィールドが隠されてしまうのではないでしょうか。

以下が私が試したものです：

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

ああ、なるほど、それは動作しないんですね。当然のことですが… 私はいつも nth-of-type が要素に焦点を当てており、クラスではないことを忘れがちです。

この場合、要素はなくクラス名しかないため動作しませんが、要素（この場合は div）を追加すると、最初の div の兄弟要素が .user-field クラスを持っている場合にのみ一致します（実際には、user-fields より前に他の div が親要素内に存在するため、持っていません）。

とにかく、長くなりましたが結論を言うと… ここでは一般隣接子セレクタが機能します。.reviewable-user-fields 内では、最初の .user-field の兄弟であるすべての .user-field を選択します。

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

何を言っているのかさっぱりわかりませんが、見事に機能しています！ありがとうございます！

これは、カスタムウィザードプラグインに依存してサインアップを行うプライベートフォーラムを利用している他の人々 @Angus にも役立つかもしれません。

2 番目または 3 番目の .user-field を表示するにはどうすればよいでしょうか？現時点では必要ありませんが、将来必要になる可能性があります。