Cette page traite des sélecteurs utilisés pour identifier les parties d'un document qu'on veut formater. J'y présente toutes les formes que peuvent prendre les sélecteurs individuels et en montrant comment les composer.

En jQuery comme en CSS, les sélecteurs sont des règles de reconnaissance de formes (pattern matching) qui déterminent les règles de style qui vont s'appliquer aux éléments dans l'arborescence d'un document: ce sont les sélecteurs. Leur complexité peut aller d'un simple nom de balise (par exemple ul pour la balise <ul>) à une expression très complexe (par exemple #mon_id .ma_classe>[title=mon_titre]). Cependant, les éléments du document qui seront sélectionnés seront ceux qui rencontrent les exigences du sélecteur. Lorsque c'est le cas, c'est toujours l'élément "contenu" de la balise qui est affecté par les règles de style ou sélectionné par jQuery.

Syntaxe des sélecteurs

Ainsi, le sélecteur universel * sélectionne tout dans la page alors que le sélecteur ul sélectionne toutes les balises <ul> de la page. # suivi de mon_id sélectionne la balise dont l'identificateur est "mon_id" (elle doit être unique dans la page), le sélecteur . suivi de ma_classe sélectionnera toutes les balises de classe "ma_classe" alors que [name] sélectionnera toutes les balises qui ont un attribut "name".

À un niveau de complexité un peu plus élevé, on retrouve alors les sélecteurs suivants:

• [attribute=value] comme dans l'exemple [target=_blank] qui sélectionne tous les éléments pour lesquels l'attribut target a la valeur _blank.
• [attribute~=value] comme dans l'exemple [title~=fleur] qui sélectionne tous les éléments avec un attribut title contenant le mot "fleur";
• [attribute|=value] comme dans l'exemple [lang|=en] qui sélectionne tous les éléments dont la valeur de l'attribut lang commence par "en";
• [attribute^=value] comme dans l'exemple a[src^="https"] qui sélectionne tous les éléments <a> dont la valeur de l'attribut src commence par "https"
• [attribute$=value] comme dans l'exemple a[src$=".pdf"] qui sélectionne tous les éléments <a> dont la valeur de l'attribut src se termine par ".pdf";
• [attribute*=value] comme dans l'exemple a[src*="gtro"] qui sélectionne tous les éléments <a> dont la valeur de l'attribut src contient la sous-chaîne "gtro";
• :attribute(value) comme dans l'exemple p:lang(it) qui sélectionne tous les éléments <p> dont la valeur de l'attribut lang commence par "it";

Sélecteurs composites

On peut aussi combiner plusieurs sélecteurs individuels en des sélecteurs composites comprenant des association de sélecteurs individuels. Cette composition s'effectue avec les notations suivantes:

• sélecteur1,sélecteur2 comme dans l'exemple div,p qui sélectionne tous les éléments <div> et tous les éléments <p>;
• sélecteur1 sélecteur2 comme dans l'exemple div p qui sélectionne tous les éléments <p> à l'intérieur d'éléments <div>;
• sélecteur1>sélecteur2 comme dans l'exemple div>p qui sélectionne tous les éléments <p> dont le parent est un élément <div>;
• sélecteur1+sélecteur2 comme dans l'exemple div+p qui sélectionne tous les éléments <p> qui sont placés immédiatement après des éléments <div>;
• sélecteur1~sélecteur2 comme dans l'exemple p~ul qui sélectionne tous les éléments <ul> précédés par un élément <p>;

Maintenant qu'on sait comment sélectionner les éléments sur lesquels on veut agir, regardons comment ces règles CSS vont influer sur l'apparence de la page.

// affiche les titres des éléments <h1> de la page
$('h1, h2').each(function(index, value){
  $('#local').append('<li class="child" rel="2"><a href="#anchor-'+index+'">'+$(this).html()+'</a></li>');
  $(this).html('<a name="anchor-'+index+'">'+$(this).html()+'</a>');
})

Liste des sélecteurs

Pour que le traitement des sélecteurs soit complet, j'ai inclus dans la table qui suit tous les sélecteurs individuels qui existent quoiqu'ils soient moins utilisés de façon courante: