Tous les objets du DOM font partie d’un arbre commun dont la racine est la balise <body>. Le tableau suivant dresse la liste des sélecteurs hiérarchiques utilisables en jQuery.
| Sélecteur | Éléments sélectionnés |
| (‘p > e’) | Éléments e directement descendants d’éléments p |
| (‘p + e’) | Éléments e directement précédés d’un élément p |
| (‘p ~ e’) | Éléments e précédés d’un élément p |
| :empty | Éléments qui n’ont pas d’enfant |
| :first-child | Premier enfant |
| :first | Premier élément |
| :last-child | Dernier enfant |
| :last | Le dernier élément de la sélection |
| :nth-child() | Élément qui est l’énième enfant de son parent |
| :only-child | Éléments qui sont enfants uniques de leur parent |
Pour vous entrainer à utiliser ces sélecteurs, tapez le code suivant dans Notepad++ et sauvegardez-le dans le fichier selecteurs-hierarchiques.htm :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sélecteurs hiérarchiques</title>
<script src="jquery.js"></script>
</head>
<body>
<h2>Sélecteurs hiérarchiques</h2>
<div id="contenu">
<p>Première liste</p>
<ul>
<li>un
<li>deux
<li>trois
<li>quatre
</ul>
</div>
<p>Deuxième liste</p>
<ol>
<li>premier
<li>deuxième
<li>troisième
</ol>
<script>
$(function() {
});
</script>
</body>
</html>
Exercice : Colorer en rouge le premier li
Solution : $(‘li:first-child’).css(‘color’,’red’);
Exercice : Colorer en rouge le troisième li
Solution : $(‘li:nth-child(3)’).css(‘color’,’red’);
Exercice : Colorer en rouge les li descendants de ul
Solution : $(‘ul>li’).css(‘color’,’red’);
Exercice : Colorer en rouge le dernier li descendant de ol
Solution : $(‘ol>li:last-child’).css(‘color’,’red’);