Introduction au sélecteur :last et :first de jQuery

Lorsque vous débutez avec jQuery, vous voyez une multitude de notions. Parmi l'une d'elles, les Sélecteurs. Nous allons donc voir ici, l'utilité des sélecteurs :first et :last. On utilise souvent ce sélecteur lorsque vous créez un contenu qui se répète telle une liste par exemple et que vous désirez mettre en évidence, le premier ainsi que le dernier élément de cette liste. Voyons donc ici comment affecté un style à au premier et le dernier élément d'une liste <ul>.

HTML

<ul class="column col3"> 
	<li> 
		<div class="block">
			<h2>:first</h2> 
			<p>Odio velit vulpes zelus elit euismod. Feugiat ille, indoles, turpis tincidunt, ea iriure capto esse nostrud paratus populus vulputate. </p> 
		</div>
	</li> 
	<li> 
		<div class="block">
			<h2>Colonne 2</h2> 
			<p>Odio velit vulpes zelus elit euismod. Feugiat ille, indoles, turpis tincidunt, ea iriure capto esse nostrud paratus populus vulputate. </p> 
		</div>
	</li> 
	<li> 
		<div class="block">
			<h2>:last</h2> 
			<p>Odio velit vulpes zelus elit euismod. Feugiat ille, indoles, turpis tincidunt, ea iriure capto esse nostrud paratus populus vulputate. </p> 
		</div>
	</li> 		
</ul>

jQuery

// Ajout d'une classe au CSS, au premier et dernier élément de la liste
$("ul.column li .block:first").addClass("first"); // Ajout de la classe au 1er élément
$("ul.column li .block:last").addClass("last"); // Ajout de la classe au 2eme élément

CSS

.first {background: #ffdbdb;}
.last {
	margin-right: 0;
	background: #c4dcff;
}