CSSを使用して、アイテムのリストの間にコンマを追加する方法

バナナ、リンゴ、オレンジ、洋ナシ、ネクタリンなどの果物などのアイテムのリストがあるとします。

HTMLに直接コンマ（、）を追加できますが、CSSでどのように実装できるかを見てみましょう。これにより、より多くの制御が得られます。同時に、最後のアイテムにコンマがないことを確認する必要があります。

私は最近、実際のプロジェクトでこの機能が必要でした。要件の一部は、リスト内のプロジェクトをJavaScriptを介して非表示/表示できることです。現在どのアイテムが表示されているかに関係なく、コンマを正しく表示する必要があります。

私が見つけたかなりエレガントなソリューションは、ユニバーサル兄弟の組み合わせを使用することです。これについては後で説明します。サンプルHTMLから始めましょう。フルーツリストから始めるとします：

<code></code>

• バナナ
• りんご
• オレンジ
• 梨
• ネクタリン

そして、それをリストとして表示するためのいくつかの基本的なCSS：

 .fruits {
  ディスプレイ：Flex;
  パディングインラインスタート：0;
  リストスタイル：なし;
}

。フルーツ {
  表示：なし; /*デフォルトで非表示*/
} 
.fruit.on { /* class javascriptによって追加され、リスト項目を表示するために使用されます* /
  ディスプレイ：インラインブロック。
}

ここで、ユーザーがコントロールを切り替えて寒い気候で成長するすべての果物を除外するなど、このインターフェイス内で何かが起こるとします。これで、さまざまなフルーツセットが表示されるようになるため、フルーツはクラスリストAPIを使用して動作します。

これまでのところ、当社のHTMLとCSSは次のようなリストを作成します。

<code>香蕉橙子油桃</code>

これで、普遍的な兄弟コンバイナーを使用して、要素上の任意の2つの間にコンマとスペースを追加できます。

 .fruit.on〜.fruit.on :: before {
  コンテンツ： '、 '; 
}

良い！

不思議に思うかもしれません。すべてのリストアイテムにコンマを適用してから、最後のアイテムから次のようなものを削除してみませんか：last-childまたは：last-of-type？これの問題は、最後の子要素がいつでも「閉じた」状態にある可能性があることです。したがって、私たちが本当に望んでいるのは、「Open」状態の最後のプロジェクトです。これは、CSSで実装するのは簡単ではありません。したがって、汎用コンビネーターのトリックが使用されます！

UIでは、ディスプレイの代わりに最大幅を使用し、0から合理的な最大値の間に切り替えて、トランジションを使用してアイテムをより自然に表示して非表示にすることができ、ユーザーがリストに追加または削除されているアイテムを簡単に確認できます。同じ効果を擬似要素に追加して、それを超滑らかにすることもできます。

ここに、いくつかのわずかに異なる例があるデモがあります。フルーツの例では、クラスではなく隠されたクラスを使用しますが、野菜の例にはアニメーション効果があります。 SCSSはネストにも使用されます。

これが他の人が同様の解決策を探しているのを助けることを願っています！

以上がCSSを使用して、アイテムのリストの間にコンマを追加する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。