以下のように「要素が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例）
|
1 2 3 |
span.item:not(:first-child):before { content: ' / '; } |
「:not(:first-child)」で1つ目の要素以外として、
その1つ目の要素以外に「:before」疑似要素で区切り文字を入れる、
なんて感じになります。
実際にこのCSSを適用する前と適用後の表示は以下の通り。
＜適用前（before）＞
要素1
要素2
要素3
＜適用後（after）＞
要素1
要素2
要素3
想定した通り、2番目以降の要素の前だけにスラッシュが付いていると思います。
ちょっと考え方を変えるだけで、CSSだけで簡単に実現できますね。^-^）
またブログの収益化については、以下のメルマガでいろいろ情報みてみてください。
では今日も頑張っていきましょう！
