以下のように「要素が1つだけ」の場合と「複数ある場合」とで表示を分けたい、ということがあります。

たとえば記事の先頭によくある、カテゴリ、タグの表示などで、

  • 1つしか表示する要素がなければ、それだけを表示する。
  • 複数(つまり次の要素が)あれば、スラッシュ( / )で区切って表示する

なんていう場合がありますよね。

<要素が1つだけの例>

  • HTML)
    <span class="category">要素1</span>
  • 期待する表示)要素1

<要素が複数の場合の例>

  • HTML)
  • <span class="item">要素1</span>
    <span class="item">要素2</span>
    <span class="item">要素3</span>
  • 期待する表示)要素1 / 要素2 / 要素3

こうしたことをしたい場合、
先頭の要素の「次に更に要素があるかどうか」を見て区切りを入れる、なんてことを今までしてましたが、そうするにはそもそも php のその表示個所をカスタマイズしたり、jQuery で次の要素に次の要素であることが分かるクラスを追加したり、なんてことになり結構面倒。

CSSだけで対応できる

でも以下のように考えれば、プログラムチックなことをせず、CSSだけで対応できますね。

  • 先頭の要素以外に対して、CSSでスタイルを設定する

例えば上の例では、要素の間にスラッシュで区切り文字を入れてますが、
「先頭の要素以外の要素」にCSSで区切り文字つつけてあげればOK。

CSS例)

「:not(:first-child)」で1つ目の要素以外として、
その1つ目の要素以外に「:before」疑似要素で区切り文字を入れる、

なんて感じになります。

実際にこのCSSを適用する前と適用後の表示は以下の通り。

<適用前(before)>

要素1 要素2 要素3

<適用後(after)>

要素1 要素2 要素3

想定した通り、2番目以降の要素の前だけにスラッシュが付いていると思います。
ちょっと考え方を変えるだけで、CSSだけで簡単に実現できますね。^-^)

またブログの収益化については、以下のメルマガでいろいろ情報みてみてください。
では今日も頑張っていきましょう!

早期退職して海外で奮闘する JIN のメールマガジン

時間や場所に縛られず稼いだJINが教える

~ 最短で月収10万円稼げるようになる方法 ~

お名前(全角文字)

隣のあの人にも、思わず教えたくなる秘密

配信停止は、いつでもできます

迷惑メールは一切配信されませんので、ご安心くださいね

自らの手で未来を変える力を手に入れる!