１番右側の画像のhoverだけ位置をずらしたい

質問

テーブル内の画像にcssでマウスオーバーで拡大画像が出るように設定しましたが、
一番右の列をマウスオーバーすると画面からその拡大画像が消えてしまうため、
この列のみもう少し左側に画像が出るようにしたいのですが、どう記述したらよいのか分かりません。
http://okwave.jp/qa/q6343605.html
↑この回答がかなり核心をついているのですが、私の記述で言うところの隣接セレクタってどこなのか分かりません。。

現在設定しているのは下記のコードです。
どなたかご教授下さい。

【html】
<tr><td class="type1" td colspan="2" scope="col" align="center" valign="middle"><a href="#" id="hover"><img src="●●.jpg" width="100" height="100" alt="ec"/></a></td>
</a></td>
</tr>

【css】
td.type1 {
height: 185px;
width: 185px;
background-color:#FFF;
}
a#hover img{
border:none;
padding:5px;
width:100px;
height:100px;
border: 1px solid #CCC;
}
a#hover{
display:block;
width:100px;
height:100px;
}
a#hover:hover img{
width:300px;
height:300px;
position:absolute;
padding:5px;
border: 1px solid #CCC;
background-color:#FFF;
}

ちなみにtdが４つ入ります。（画像は横に４つ入り、一番右側というのは４番目になります）

回答No.1

ORUKA1951

隣接セレクタとは、
セレクタ ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/selector.html#adjacent-selectors )
です。兄弟関係から探します。
ElementAを兄に持つElementBを兄に持つ・・・と

CSS3だと、
:nth-child(n)　n番目の要素
:last-child　　最後の要素
が使えるけど・・