E:nth-last-child(n)

メイン画像

サブコンテンツ
サブコンテンツ
サブコンテンツ

サブコンテンツ
サブコンテンツ
サブコンテンツ

サブコンテンツ
サブコンテンツ
サブコンテンツ

E:nth-last-of-type(n)

メイン画像

サブコンテンツ
サブコンテンツ
サブコンテンツ

サブコンテンツ
サブコンテンツ
サブコンテンツ

サブコンテンツ
サブコンテンツ
サブコンテンツ

-margin

メイン画像

サブコンテンツ
サブコンテンツ
サブコンテンツ

サブコンテンツ
サブコンテンツ
サブコンテンツ

サブコンテンツ
サブコンテンツ
サブコンテンツ

今回メインのcss

@charset "utf-8";

/* 別cssのリセット ------------------------- */
body {
font-size:80%;
}

h1 {
font-size:150%;
margin:1em 0;
}

h2 {
font-size:120%;
margin:1em 0;
}
li,ul,p {
margin:0;
padding:0;
}
/* /別cssのリセット ------------------------- */

p {
padding:10px;
margin:0;
}

#content {
width:380px;
padding:10px 10px 0 10px;
border:1px solid SteelBlue;
}

.main {
width:380px;
text-align:center;
line-height:234px;
color:black;
background:LightSkyBlue;
margin-bottom:10px;
height:234px;
}

.sub {
width:120px;
margin:0 10px 10px 0;
background:aliceBlue;
float:left;
}

#content:after,
.subbox:after{
content:"";
display:block;
clear:both;
}

/* ここでmarginを消してる*/
.lastchild .sub:nth-last-child(1),
.oftype .sub:nth-last-child(1) {
margin-right:0;
}

/* マイナスのmargin */
.subbox {
margin-right:-10px;
}

このページは乱雑モックアップのサンプルページです。