Rimuovere il bordo superiore del primo figlio e bordo inferiore dello scorso bambino in CSS

Question

ho il seguente codice HTML:

<ul> 
<li>FIRST</li> 
<li>SECOND</li> 
<li>THIRD</li> 
<li>FOURTH</li> 
<ul> 

E il seguente CSS:

li 
{ 
border-top:1px solid #FFF; 
border-bottom: 1px solid #D0D0D0;  
}​ 

Come posso rimuovere il bordo superiore per il primo elemento LI e il bordo inferiore per l'ultimo elemento LI?

Answer 1

li:first-child { 
    border-top: none; 
} 
li:last-child { 
    border-bottom: none; 
} 

Proprio così.

Answer 2

Utilizzare il selettore CSS :not per applicare gli stili solo laddove richiesto, anziché aggiungerli e rimuoverli.

Per esempio,

body { 
 
    background: #acc; 
 
} 
 

 
li:not(:first-child) { 
 
    border-top: 1px solid #fff; 
 
} 
 

 
li:not(:last-child) { 
 
    border-bottom: 1px solid #000; 
 
}

<ul> 
 
    <li>First</li> 
 
    <li>Second</li> 
 
    <li>Third</li> 
 
    <li>Fourth</li> 
 
</ul>