【CSS】いくつもあるclassの最後の一つだけを指定したい
ブログの記事など、いくつか同じハコを並べたときに、最後のマージンが!! これなんとかしたい、ということはないでしょうか??
こういうときに便利な、最後のコンテンツ(画像でいうところの、「院長紹介」のところ)だけをCSSで指定することができます。
疑似クラスの、「:last-child」を使うと便利です。
CSSで以下のように指定します。
----------------------------------------
#container .content:last-child { margin: 0; }
----------------------------------------
先ほどの画像でいうと、以下のような形ですね。
これで、last-childにのみ、「margin-bottom: 0;」を指定してやれば、下の余白を消すことができます!
なくなっていますね!(黄色のところ)
ほかにも、疑似クラスは、いろいろあって、場合に応じて使うと便利なようです。(last-childを入れて4つ!)
同様に、「:first-child」と記述すると、最初の子要素に適用してくれます。
似たもので、「E p:first-of-type」、「E p:last-of-type」といったものもあります。
これらは、Eの中の要素で、pが、必ずしも最初でなかったとしても、一つ目のpを探して、適用してくれます。
- E p:first-of-type 最初の一つが必ずしもpでなかったとしても、一つ目のpを上から探して適用してくれる
- E p:last-of-type 最後の一つが必ずしもpでなかったとしても、一つ目のpを下から探して適用してくれる
これについては、以下サイトで詳しく説明してくださっていました。
ご参考まで。
http://www.vanfu-vts.jp/blog/2014/09/first-child_last-child/