En esta ocasión vamos a ver como podemos seleccionar solo los elementos pares e impares de un elemento padre.
Ejemplos, selector :nth-child(even / odd)
<!DOCTYPE html>
<html>
<head>
<title>Selectores pares e impares del hijo de un padre</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:nth-child(even)').css({"border":"1px solid red"});
});
$('h2').click(function(){
$('ul.uno li:nth-child(odd)').css({"border":"1px solid red"});
});
});
</script>
<style>
*{
width: 100%;
margin: 0 auto;
}
</style>
</head>
<body>
<h1 id='miId'>Selector de los li pares de los padres ul</h1>
<ul class="uno">
<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 de los li impares de los padres ul.uno (la 1ª lista)</h2>
<ul>
<li>
Lista 1
</li>
<li class="pr">
Lista 2
</li>
<li class="pr2">
<a href=''>Lista 3</a>
</li>
<li>
Lista 4
</li>
<li class="pr">
Lista 5
</li>
</ul>
</body>
</html>
Otra vez más, vemos un ejemplo de como con una simple línea podemos añadir efectos visuales atractivos a nuestra web.
$('li:nth-child(even)').css({"border":"1px solid red"});
En este ejemplo vamos a poner un bode rojo a todos los hijos li de los padres ul.
$('ul.uno li:nth-child(odd)').css({"border":"1px solid red"});
Y en este otro ejemplo, ponemos el borde solo a los li hijos de los padre ul class=uno, en el ejemplo la primera lista.