Vamos a ver como seleccionar el primer elemento 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).
El selector :first es el encargado de seleccionar el primer elemento indicado, solo selecciona un elemento, el primero.
Ejemplo, selector :first
<!DOCTYPE html>
<html>
<head>
<title>Selector del primer 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:first').css({"border":"1px solid red"});
});
});
</script>
<style>
*{
width: 100%;
margin: 0 auto;
}
</style>
</head>
<body>
<h1 id='miId'>Seleccionar primer elemento</h1>
<ul>
<li>
Lista 1
</li>
<li>
Lista 2
</li>
<li>
Lista 3
</li>
<li>
Lista 4
</li>
<li>
Lista 5
</li>
</ul>
<hr>
<h2>LISTA 2</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>
En realidad el código necesario es 1 línea, el resto es HTML y CSS.
$('ul li:first').css({"border":"1px solid red"});
En este ejemplo, cuando hacemos clic en el encabezado h1, buscamos el primer li que se encuentre dentro de un ul, como podemos observar hay 2 ul-s, con sus respectivos li-s, pero en este ejemplo solo se ejecutará el primero de ellos.