CSSを使ったli要素の装飾におけるちょっとした小技メモ

スポンサーリンク

先日の「ブログデザイン勉強会」からしばらく経ちましたが、サイドバーもちょこちょこ再びいじったりしてまして、これで漸く完全リニューアル完了かなぁと思っています。

だいぶ印象変わったかなぁ。ちょっと白ベースが増えた感も否めませんが、まぁコレはコレでありかなと。

で、今回はそのサイドバーを改変する際に知ったCSSのちょっとした小技をメモ。

元々うちの場合、特定のli要素に対してテキストの下に罫線を表示させていたんですが、ここをちょっとゴニョゴニョすると、最後のli要素の下に表示される罫線が消せるというやつです。

この方法、全然知らなくて、今回初めて使いました。なので自分用メモ。

これがコレまでの場合。この場合のCSSは、

li { padding: 0px 0px 5px 0px; list-style: none; background: url(line.gif) bottom repeat-x; }

という感じで、back-groundに画像を指定しています。

これを、

こんな感じにラストのとこだけ消す場合は、以下のように記述します。

li { padding: 0px 0px 5px 0px; list-style: none; background: url(line.gif) bottom repeat-x; } li:last-child { padding: 0px 0px 5px 0px; list-style: none; background: none; }

肝心なのが、:last-childという指定ですね。この指定をしてやると、ラストの画像だけ表示しないようになります。

うん、なんかこういう方がスッキリして見える気がしますね。
CSSでこういう指定方法があるとは。日々勉強ですな。

「Hacks」新着記事

カスタムブロックを追加するなら「Block Lab」プラグインを導入すると幸せかもしれない

Avatar for ホシナ カズキ

ホシナ カズキ

「Password Checkup」がChromeユーザーのセキュリティを守ってくれるかもしれない

Avatar for ホシナ カズキ

ホシナ カズキ

Facebookアプリで3D写真投稿機能をONにするには? 試してみたら本当にできた件

Avatar for ホシナ カズキ

ホシナ カズキ

Twitterアプリに搭載されたデータセーブ機能をONにする方法

Avatar for ホシナ カズキ

ホシナ カズキ

大規模・広範囲にわたるクラッキングによるWordPress改ざん事案が発生中

Avatar for ホシナ カズキ

ホシナ カズキ

もっと見る

モバデビモバイルウェブのネタ、ニュースMaciPhoneなどのApple関連、WordPressのことなど、いろいろ書く雑食系ブログメディア。
ためになるかもしれないし、ならないかもしれない。そこそこ更新してますそこそこ。

このブログについてもっと詳しく