鶏口牛後な日々

心の赴くまま、やりたいことを仕事に。

【CSS】いくつもあるclassの最後の一つだけを指定したい

ブログの記事など、いくつか同じハコを並べたときに、最後のマージンが!! これなんとかしたい、ということはないでしょうか??

 

f:id:TACOSVilledge:20170117113925p:plain

 

 こういうときに便利な、最後のコンテンツ(画像でいうところの、「院長紹介」のところ)だけをCSSで指定することができます。

疑似クラスの、「:last-child」を使うと便利です。

 

CSSで以下のように指定します。

 

----------------------------------------

 

#container .content:last-child {     margin: 0; }

 

----------------------------------------

 

先ほどの画像でいうと、以下のような形ですね。

 f:id:TACOSVilledge:20170117113943p:plain

 

これで、last-childにのみ、「margin-bottom: 0;」を指定してやれば、下の余白を消すことができます!

なくなっていますね!(黄色のところ)

 

f:id:TACOSVilledge:20170117113952p:plain

 

ほかにも、疑似クラスは、いろいろあって、場合に応じて使うと便利なようです。(last-childを入れて4つ!)

同様に、「:first-child」と記述すると、最初の子要素に適用してくれます。  

似たもので、「E p:first-of-type」、「E p:last-of-type」といったものもあります。

これらは、Eの中の要素で、pが、必ずしも最初でなかったとしても、一つ目のpを探して、適用してくれます。

 

  1. E p:first-of-type  最初の一つが必ずしもpでなかったとしても、一つ目のpを上から探して適用してくれる
  2. E p:last-of-type  最後の一つが必ずしもpでなかったとしても、一つ目のpを下から探して適用してくれる

 

これについては、以下サイトで詳しく説明してくださっていました。

 

ご参考まで。

http://www.vanfu-vts.jp/blog/2014/09/first-child_last-child/