N番目の子CSSのターゲット最後と最初の3子

Question

私は最後と最初の3子をターゲットにすることができますどのようにこの

<ul> 
    <li>1.1</li> 
    <li>1.2</li> 
    <li>1.3</li> 
    <ul> 
     <li>2.1</li> 
     <li>2.2</li> 
     <li>2.3</li> 
    </ul> 
    <ul> 
     <li>2.4</li> 
     <li>2.5</li> 
     <li>2.6</li> 
    </ul> 
    <li>1.4</li> 
    <li>1.5</li> 
    <ul> 
     <li>2.7</li> 
     <li>2.8</li> 
     <li>2.9</li> 
    </ul> 
    <li>1.6</li> 
    <li>1.7</li> 
    <li>1.8</li> 
</ul> 

ようなHTMLがありますか？私のhtmlで私だけ1.1をしたい、1.2、1.3、1.6、1.7と1.8がターゲットになります。

この

は私が triedそれUL

Answer 1

まずULの子どもたちの内部でも、李を対象とするものである、あなたは、あなたが興味を持っているul識別するための方法が必要です。あなたが最も外側のulにクラスまたはIDを追加することができますあなたのセレクタは他のulのものをターゲットにしません。 HTMLを編集することができない場合は、セレクタの親要素を使用し、直接子孫ulを選択することができます。

次に、右のセレクタを使用して最初と最後の3つの子を取得します。最後の3人の子供を選択するには

ul.top > li:nth-child(-n+3) 

：最初の3人の子供を選択するには

ul.top > li:nth-last-child(-n+3) 

はhere.