Selectores 1er y último hijo :first-child y :last-child

Vamos a ver como podemos seleccionar el primer y último elemento hijo de su padre, con los comandos :first-child y :last-child. En este caso se seleccionan el primer y último elemento de cada padre, no como el comando :first que selecciona el primero de todo el documento, puedes ver un ejemplo aquí.

Ejemplos, selectores :first-child y :last-child

<!DOCTYPE html>
<html>
<head>
<title>Selectores del primer y último elemento hijo</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#miId').click(function(){ 
$('li:first-child').css({"border":"1px solid red"});
}); 
$('h2').click(function(){ 
$('li:last-child').css({"border":"1px solid red"});
}); 
});
</script>
<style>
*{
width: 100%;
margin: 0 auto; 
} 
</style>
</head>
<body>
<h1 id='miId'>Selector del primer elemento hijo</h1> 
<ul>
<li class="pr">
Lista 1
</li>
<li>
Lista 2
</li>
<li class="pr">
Lista 3
</li>
<li>
Lista 4
</li>
<li class="pr">
Lista 5
</li>
</ul> 
<h2>Selector del último elemento hijo</h2>
<ul>
<li>
Lista 1
</li>
<li class="pr">
Lista 2
</li>
<li class="pr2"> 
<a href=''></a>Lista 3</a>
</li>
<li>
Lista 4
</li>
<li class="pr">
Lista 5
</li>
</ul> 
</body>
</html>

En realidad el código necesario es 1 línea, el resto es HTML y CSS.

//primer hijo de los padres
$('li:first-child').css({"border":"1px solid red"});
//último hijo de los padres
$('li:last-child').css({"border":"1px solid red"});

En este ejemplo seleccionamos los primeros y últimos elementos de cada padre.

Ver ejemplo