パイソンさんよりもルビーさんよりも、ペチパーさんの方がだ〜い好きな、ユゲタです。
気持ち悪いぐらいに、引っ越しのCMを真似してみましたが、可愛く伝わったでしょうか？
今回は仕事で行った作業で、ふとした事がきっかけで実現できたCSSの技を身に付けたので、ブログに書き残しておこうと思います。
少しニッチな処理になりますが、フロントエンジニアの人などは使える技だと思うので、知ってるだけでスキルアップする技として、覚えてみてください。
要素をつなげる処理
ユゲタの仕事でやった作業は、とある入力フォームの確認画面を作るという画面で、その中に、「興味関心がある項目」というのがありました。
とあるアパレルショップのアンケートページだったんですが、
帽子、バッグ、小物、上着、パンツ
という風に、売られている商品のジャンルが書かれてて、どういった商品をユーザーが求めているのかをアンケートで募集するページなんですね。
（※内容は、わかりやすく変えております）
実際の画面は、次のような感じです。
これを確認ページに遷移した時に、次のようなDOM構造で表示されます。
<span>帽子</span>
<span>バッグ</span>
<span>小物</span>
<span>上着</span>
<span>パンツ</span>
これを次のように表示するという仕様でした。
帽子 / バッグ / 小物 / 上着 / パンツ
単純に擬似要素を使えばいいかと思っていたんですが、選択されていない要素もそのまま空要素として、表示されてしまうので、次のような状態が発生します。
<span>帽子</span>
<span></span>
<span></span>
<span>上着</span>
<span>パンツ</span>
CSSでトライ（失敗編）
まずとりあえず、CSSで普通に書いてみると次のようになります。
span + *::before{
content: " / ";
}
帽子 / バッグ / 小物 / 上着 / パンツ
beforeの擬似要素を最初のspanだけ適用されないところがミソです。
でもこれが、チェックされない歯抜けの状態になると、次のようになります。
帽子 / / / 上着 / パンツ
いかんですねぇ〜。
ブランク状態の場合はスラッシュを表示しないようにしたいんだよな〜。
完璧版
そこで、近隣セレクター処理というのを思い出し、次のように書いてみました。
span:empty{
display:none;
}
span:not(*:empty) ~ *:before{
content: "/";
}
まったく、シンプルに見えますが、cssがちょっとわかる人は、読み解きにくいでしょうね・・・
ポイント-1
簡単に説明すると、まず、span:emptyとして、中が空のspan要素は、display:noneとして、要素ごと非表示にしておきます。
※今回のコードではこれはなくてもいいんですが、スペーサー記述などがある場合もあるので、消しておいた方が賢明です。
ポイント-2
次に、span:not(*:empty) ~ *:beforeの箇所ですが、not(*:empty)は、から以外の要素に適用する書き方で、
~ *は、戦闘以降の要素全てに適用できます。
+ *にすると、隣の要素にしか適用されないので、思った通りの結果が得られません。
そして、来られに対して、before擬似要素を適用すると、次のようにできました。
帽子 / 上着 / パンツ
う〜〜ん、マーベラス！！！
まったく、気持ちのいい、プログラミングでしたわい！！！
やってやれないことはない、CSSコーディング。
0 件のコメント:
コメントを投稿