Vamos a ver como seleccionar el último 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 :last es el encargado de seleccionar el último elemento indicado, solo selecciona un elemento, el último.
Ejemplo, selector :last
<!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:last').css({"border":"1px solid red"});
});
});
</script>
<style>
*{
width: 100%;
margin: 0 auto;
}
</style>
</head>
<body>
<h1 id='miId'>Seleccionar último 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>
Nuevamente el código necesario no es más que una línea, el resto es código HTML y CSS.
$('ul li:last').css({"border":"1px solid red"});
Aunque tenemos 2 ul-s con sus respectivos li-s al pinchar sobre el encabezado h1, solo se selecciona el último li del documento HTML.
Deja una respuesta