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.
Deja una respuesta