Quita el borde superior del primer hijo y el borde inferior del último hijo en CSS

Question

tengo el código HTML siguiente:

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

Y el siguiente CSS:

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

¿Cómo puedo eliminar el borde superior para el primer elemento LI, y el borde inferior para el último elemento LI?

Answer 1

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

Así como eso.

Answer 2

Utilice el selector CSS :not para aplicar estilos solo cuando sea necesario, en lugar de agregarlos y luego eliminarlos.

Por ejemplo,

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>