[CSS3] last-childについて

質問

html5とcss3にてスマートフォンサイト制作をしております。
リスト要素を使いメニューを作っていますが、一番下の要素だけボーダーを削除したいと
思っていますが、うまくいきません。
詳しい方、ご教授いただけませんでしょうか。　よろしくお願い致します。

----------------------------------------------------------
[HTML]

<nav>
<ul id="navi">
<a href="#"><li>メニュー1</li></a>
<a href="#"><li>メニュー2</li></a>
<a href="#"><li>メニュー3</li></a>
<a href="#"><li>メニュー4</li></a>
<a href="#"><li>メニュー5</li></a>
</ul>
</nav>

[CSS]

nav {
display: block;
width: 300px;
margin-right: auto;
margin-left: auto;
margin-bottom: 18px;
}

#navi {
border-radius: 8px;
-webkit-border-radius: 8px;
border: 1px solid #CCCCCC;
background: -webkit-gradient(linear, left top,left bottom, from(#FFFFFF), to(#E7E7E7));
background-color: #FFFFFF;
}

#navi a {
text-decoration: none;
color: #646464;
font-size: 1.31em;
text-indent: 16px;
height: 33px;
line-height: 33px;
}

#navi li {
border-bottom: 1px solid #CCCCCC;
}

#navi li:last-child {
border-bottom-style: none;
}

回答No.2

ORUKA1951 · ベストアンサー

まず、HTMLをチェックしましょう。
★Another HTML-lint 5 ( http://www.htmllint.net/html-lint/htmllint.html )
　確かに、HTML5ではA要素で<li></li>を括ることはできますが、この場合は
　<li><a></a></li>
　とすべきです。以下、タブは全角スペース２個に置換してあります。

<nav id=#grovalNavi">
　　<ul>
　　　　<li><a href=""></a></li>
　　　　<li><a href=""></a></li>
　　　　<li><a href=""></a></li>
　　　　<li><a href=""></a></li>
　　　　<li><a href=""></a></li>
　　</ul>
</nav>
とすべきです。
nav {display: block;width: 300px;margin: 0 auto 18px;}
nav ul,nav ul li{display:block;list-style-type:none;margin:0;padding:0;position:relative;}
nav ul{
　　border-radius: 8px;
　　border: 1px solid #CCCCCC;
　　background-color: #EEEEEE;
　　background: -moz-linear-gradient(white, #E7E7E7);
　　background: -webkit-gradient(linear, left top, left bottom, from(white), to(#E7E7E7));
　　line-height: 26px;
　　text-align:center;
}
nav ul li{height:33px;}
nav ul li a{
　　text-decoration: none;
　　color: #646464; font-size: 18px;
　　display:block;height:95%;width:80%;margin:auto;
}
nav ul li {border-bottom: 1px solid #CCCCCC;}
nav ul li:last-child {border-bottom-style: none;}

しかし、最後の二行は、次のほうが良いです。borderの引かれる順番があるので・
nav ul li+ li{border-top:1px solid #CCCCCC;}

★上記スタイルシートは、aをblockにしてありますが、上下のリンクエリアとの間にリンク不能のスペースを取りましょう。

お礼

ORUKA1951様

とても丁寧にご回答いただきありがとうございました。
いただいた回答を参考に実装することが出来ました。
ありがとうございました。

回答No.1

DrFell

<ul id="navi">
<li><a href="#a">メニュー1</a></li>
<li><a href="#b">メニュー2</a></li>
<li><a href="#c">メニュー3</a></li>
<li><a href="#d">メニュー4</a></li>
<li><a href="#e">メニュー5</a></li>
</ul>

cssはそのままでliとaをひっくり返して見てください（親子関係を変える）。
ulの子どもはliのみ認められています。

お礼

DrFell様

ご回答ありがとうございました。
やはりli と　a の逆転は使用できないのですね。
都合上どうしても逆転させたかったのですが。

参考になりました。