Seleccionar un elemento concreto con JQUERY

Vamos a ver como seleccionar un elemento concreto con JQUERY, un elemento que no sea el primero o el último por ejemplo el cuarto y en nuestro caso le daremos estilo cuando suceda algo en nuestra web (cuando se haga clic en un texto h1).

Mediante el selector :qr(x) podemos indicarle a JQUERY el número del elemento que queremos seleccionar.

Ejemplos, selector :eq

<!DOCTYPE html>
<html>
<head>
<title>Selector un elemento concreto</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:eq(6)').css({"border":"1px solid red"});
}); 
$('h2').click(function(){ 
$('ul li:eq(3)').css({"border":"1px solid red"});
}); 
});
</script>
<style>
*{
width: 100%;
margin: 0 auto; 
} 
</style>
</head>
<body>
<h1 id='miId'>Seleccionar el elemnto de la lista número = 6</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 el elemnto de la lista número = 3</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, el resto es código HTML y CSS.

Hay que tener en cuenta que la numeración empieza por 0, es decir el primer valor li es 0, el segundo 1, etc.

//pinta el 4º li
$('ul li:eq(3)').css({"border":"1px solid red"});

Como puedes comprobar en el ejemplo de abajo, la numeración es sobre el total de elementos, si queremos que sea de forma exclusiva podemos crearle un estilo único o podemos crear un filtro con hijos y padres.

Ver ejemplo