最後の子CSS3

Question

最初のアイテムから左ボーダーを削除し、リスト内の4番目のアイテムから右ボーダーを削除する必要があります。これらのアイテムのサブリストには影響しません。これどうやってするの？

メニューリストのための私のコードは次のとおりです。

私は

#menu ul li a { padding: 10px; display: inline-block; border-right-width: 1px; border-left-width: 1px; border-right-style: solid; border-left-style: solid; border-right-color: #CCC; border-left-color: #000; } 

に境界線を追加し、私は最初の子

から境界線を削除するには、このコードを使用するコードである

<div id="menu"> 
    <ul><li><a href="#">First Item</a><ul> 
    <li><a href="#">First Sub Item</a></li> 
    <li><a href="#">Second Sub Item</a></li> 
    </ul></li></ul> 

    <ul> 
    <li><a href="#">Second Item</a> 
     <ul> 
     <li><a href="#">First Sub Item</a></li> 
     <li><a href="#">Second Sub Item</a></li> 
     </ul> 
    </li> 
    </ul> 

    <ul> 
    <li><a href="#">Third Item</a> 
     <ul> 
     <li><a href="#">First Sub Item</a></li> 
     <li><a href="#">Second Sub Item</a></li> 
     </ul> 
    </li> 
    </ul> 

    <ul> 
    <li><a href="#">Fourth Item</a> 
     <ul> 
     <li><a href="#">First Sub Item</a></li> 
     <li><a href="#">Second Sub Item</a></li> 
     </ul> 
    </li> 
    </ul> 
</div> 

#menu ul:first-child a { border-left: 0px; } 

これは完璧に動作しますが、私が最後の子供から削除する場合は、サブアイテムul li ul liに影響しますないUL李私は管理者が将来

Answer 1

最初の項目に追加されますどのように多くの項目がわからないので、それが動的に来るよう、私は手動で最後の子にクラスを追加することはできません

：

#menu ul:first-child

最終アイテム：フルブラウザの互換性のため

#menu ul:last-child

、追加最初の要素と最後の要素のクラス。

<ul class="first-list"> 
    <li><a href="#">First Item</a><ul> 
    <li><a href="#">First Sub Item</a></li> 
    <li><a href="#">Second Sub Item</a></li> 
    </ul></li></ul> 

    <ul> 
    <li><a href="#">Second Item</a> 
     ... 

    <ul class="last-list"> 
    <li><a href="#">Fourth Item</a> 
     <ul> 
     <li><a href="#">First Sub Item</a></li> 
     <li><a href="#">Second Sub Item</a></li> 
     </ul> 
    </li> 
    </ul> 

.first-list {} 
.last-list {} 

ほとんどの言語は、クエリまたは配列の最初と最後のエントリの検出器をサポートしています。

OR

あなたはjqueryのを使用している場合は、そのように選択することができます。最後に、子供がIE9までIEでサポートされていないことを

$('#menu ul:first').addClass('first-list')

Answer 2

#menu ul:first-child { border-left: 0; } 
#menu ul:last-child { border-right: 0; } 

注意。最初の子はIE7以上で動作するはずです。

Answer 3

はこの1

#menu ul li a { padding: 10px; display: inline-block; border-right-width: 1px; border-left-width: 1px; border-right-style: solid; border-left-style: solid; border-right-color: #CCC; border-left-color: #000; color:#000; } 

#menu > ul:first-child > li > a { border-left: 0px;} 

#menu > ul:last-child > li > a { border-right: 0px}