Vamos a ver como seleccionar todos los elementos pares e impares de una lista con JQUERY, y en nuestro caso le daremos estilo cuando suceda algo en nuestra web (cuando se haga clic en un texto h1 seleccionaremos los pares y cuando hagamos clic en el h2 seleccionaremos los elementos impares).
El selector :even es el encargado de seleccionar todos los elementos pares de la web, y el elemento :odd se encarga de seleccionar todos los elementos impares.
Ejemplos, selector pares :even y selector impares :odd
<!DOCTYPE html>
<html>
<head>
<title>Selector del último elemento</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(){
$('ul li:even').css({"border":"1px solid red"});
});
$('h2').click(function(){
$('ul li:odd').css({"border":"1px solid red"});
});
});
</script>
<style>
*{
width: 100%;
margin: 0 auto;
}
</style>
</head>
<body>
<h1 id='miId'>Seleccionar elementos PARES</h1>
<ul>
<li>
Lista 1
</li>
<li>
Lista 2
</li>
<li>
Lista 3
</li>
<li>
Lista 4
</li>
<li>
Lista 5
</li>
</ul>
<h2>Seleccionar elementos IMPARES</h1>
<ul>
<li>
Lista 1
</li>
<li>
Lista 2
</li>
<li>
Lista 3
</li>
<li>
Lista 4
</li>
<li>
Lista 5
</li>
</ul>
</body>
</html>
Nuevamente el código necesario no es más que una línea para cada selector, el resto es código HTML y CSS.
//elementos pares
$('ul li:even').css({"border":"1px solid red"});
//elementos impares
$('ul li:odd').css({"border":"1px solid red"});
Como puedes comprobar en el ejemplo de abajo da igual donde hagamos clic, selecciona todos los li-s pares y / o todos los elementos impares presentes en el documento HTML.