Lorsque vous utilisez un sélecteur CSS, un ou plusieurs éléments sont sélectionnés dans le DOM. En ajoutant un pseudo-sélecteur au sélecteur, vous allez pouvoir filtrer la sélection en ne conservant que les éléments pairs, impairs, ayant un certain index, etc. Le tableau suivant regroupe les pseudo-sélecteurs utilisables en jQuery :
| Sélecteur | Éléments sélectionnés |
| :even | Éléments pairs |
| :odd | Éléments impairs |
| :eq() | Élément dont l’index est spécifié |
| :gt() | Éléments dont l’index est supérieur à (greater than) l’index spécifié |
| :lt() | Éléments dont l’index est inférieur à (lower than) l’index spécifié |
Vous avez appris à utiliser le pseudo-sélecteur :eq() pour limiter la sélection au énième élément sélectionné. Par exemple, pour surligner en jaune le deuxième li du document, utilisez cette instruction :
$('li:eq(1)').css('background-color','yellow');
Exercice : Quelle instruction devez-vous utiliser pour sélectionner les éléments li pairs supérieur à 2 ?
Solution : $(‘li:even:gt(1)’).css(‘background-color’,’yellow’);
Exercice
Tapez le code suivant et enregistrez-le dans le fichier tableau.htm :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sélecteurs CSS</title>
<style>
td { width: 30px; text-align: center;}
</style>
<script src="jquery.js"></script>
</head>
<body>
<table border>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>a</td><td>b</td><td>c</td></tr>
<tr><td>A</td><td>B</td><td>C</td></tr>
<tr><td>x</td><td>y</td><td>z</td></tr>
</table>
<script>
$(function() {
// Insérer le code jQuery ici
});
</script>
</body>
</html>
Insérez des instructions jQuery pour colorer les éléments td pairs en rouge et les éléments impairs en jaune.
Solution :
$('td:even').css('background-color','red');
$('td:odd').css('background-color','yellow');
Voici le résultat :
Plusieurs autres pseudo-sélecteurs peuvent être utilisés dans des tableaux. En voici la liste :
| Pseudo-sélecteur | Éléments sélectionnés |
| :first | Premier élément |
| :last | Dernier élément |
| :eq() | Élément dont l’index est spécifié |
| :gt() | Éléments dont l’index est supérieur à l’index spécifié |
| :lt() | Éléments dont l’index est inférieur à l’index spécifié |
| :even | Éléments d’index pair |
| :odd | Éléments d’index impair |
| :empty | Éléments qui n’ont pas d’enfant |
| :not() | Éléments qui ne correspondent pas au sélecteur spécifié |
Par exemple, pour colorer la première et la dernière cellule d’un tableau en vert, vous utiliserez les instructions suivantes :
$('td:first').css('background-color','green');
$('td:last').css('background-color','green');
Exercice : Colorez en jaune les lignes d’index supérieur à 2
Solution : $(‘tr:gt(1)’).css(‘background-color’,’yellow’);
Exercice : Colorez toutes les lignes en jaune sauf la dernière
Solution : $(‘tr:not(tr:last)’).css(‘background-color’,’yellow’);
