Médiaforma

All posts tagged sélecteur

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’);


Cliquez ici pour accéder au pack eBook+vidéos HTML5, CSS3, JavaScript

Le sélecteur CSS * (astérisque) s’adresse à toutes les balises du document. En lui affectant une police, une taille de caractères, un espacement de caractères ou de lignes, etc., tout le document est modifié en conséquence.

A titre d’exemple, nous allons modifier la police et l’espacement entre les lignes d’un document en utilisant le sélecteur astérisque. Voici le code utilisé :

Et voici deux versions de ce document. La première n’utilise aucun style. La seconde redéfinit le style de toutes les balises en utilisant le sélecteur astérisque.


Examinons le code.

Le corps du document contient un titre de niveau 2 et un peu de texte issu du site http://fr.lipsum.com/.

Le sélecteur * redéfinit :

  • Ligne 7 : la police du document ;
  • ligne 8 : l’espacement entre les lignes.


Cliquez ici pour accéder au pack eBook+vidéos HTML5, CSS3, JavaScript

Pour en terminer avec les sélecteurs CSS, nous allons nous intéresser aux sélecteurs d’attributs. Rappelez-vous, les attributs sont placés à l’intérieur des balises HTML. Ils précisent les caractéristiques des balises dans lesquelles ils se trouvent.

Dans cet exemple, nous allons modifier la mise en forme des éléments d’un tableau.

Le tableau contient quatre lignes et trois colonnes. Sur la première ligne, les trois cellules sont fusionnées à l’aide de l’attribut colspan. Sur la deuxième ligne, les cellules ne sont pas fusionnées. Sur la troisième ligne, les deux premières lignes sont fusionnées et la troisième cellule est indépendante. Enfin, sur la quatrième ligne, les trois cellules sont fusionnées. Pour bien voir la mise en forme des cellules, l’attribut border est ajouté à la balise <table>.

Exécutons ce code dans Internet Explorer. Le tableau se présente bien comme prévu. Deux de ses lignes ont trois cellules fusionnées et une de ses lignes a deux cellules fusionnées :

Nous allons maintenant ajouter un sélecteur d’attribut pour centrer le texte dans les cellules fusionnées. Pour cela, il suffit de préciser l’attribut entre crochets et de définir la nouvelle mise en forme. Ici, l’attribut à utiliser est colspan et la mise en forme définit le centrage du texte :

Examinons le résultat dans un navigateur. Comme vous pouvez le voir, toutes les cellules fusionnées ont leur contenu centré.

Supposons maintenant que vous ne vouliez centrer que les cellules fusionnées dont l’attribut colspan a pour valeur 3. Ce réglage devrait centrer les lignes 1 et 4 du tableau, mais pas la ligne 3. Pour cela, vous devez préciser la valeur de l’attribut entre les crochets, comme ceci :

Exécutons ce code dans un navigateur. Effectivement, le texte contenu dans la cellule fusionnée de la ligne 3 n’est pas centré. Par contre, celui des lignes 1 et 4 est centré :


Cliquez ici pour accéder au pack eBook+vidéos HTML5, CSS3, JavaScript

Dans la section précédente, vous avez appris à limiter les modifications de styles CSS à une balise spécifique dont l’attribut class ou id a une valeur particulière. Dans cette section, je vais vous montrer comment utiliser un sélecteur descendant pour modifier les caractéristiques d’une balise enfant d’une autre balise.

Dans cet exemple, nous allons modifier le style des balises <li> enfants d’une balise <div>. Le corps du document contient deux listes <ul> identiques. La première est spécifiée à l’extérieur d’une balise <div> et la deuxième à l’intérieur d’une balise <div>.

Pour modifier le style des balises <li> contenues dans une balise <div>, nous allons utiliser un sélecteur descendant en précisant la balise parent (div) et la balise enfant (li). Dans cet exemple, les balises <li> contenues dans une balise <div> seront de couleur rouge :

Exécutons ce code dans un navigateur. Comme vous pouvez le voir, seules les balises <li> contenues dans une balise <div> sont affectées par le changement de style.


Cliquez ici pour accéder au pack eBook+vidéos HTML5, CSS3, JavaScript

Dans les rubriques précédentes, vous avez appris à définir les sélecteurs “.” et “#” pour modifier respectivement le style d’une balise possédant un certain attribut id ou class.

Je vous propose d’aller plus loin en découvrant quelques-unes des possibilités offertes par les sélecteurs. Ici, nous allons utiliser une feuille de styles interne, mais vous pourriez tout aussi bien utiliser une feuille de styles externe, stockée dans un fichier d’extension .css.

Commencez par insérer une balise <style> et son terminateur </style> dans l’en-tête du document.

Pour redéfinir les caractéristiques de la balise <h2>, tapez h2, sans les caractères “<” et “>” entre les balises <style> et </style>. Ajoutez une accolade ouvrante et une accolade fermante et indiquez les propriétés à modifier entre les accolades. Ici par exemple, nous modifions la couleur des caractères de titre h2.

Allons un peu plus loin. Supposons que le document contienne plusieurs titres de niveau 2, et donc, plusieurs balises <h2>. En modifiant le style h2, toutes les balises <h2> vont être affectées. Par contre, pour que seules certaines d’entre elles soient modifiées, vous utiliserez une ou plusieurs classes.

Ici par exemple, toutes les balises <h2> sont de couleur rouge, mais seules les balises <h2> de classe special sont en italique.

Voyons le résultat de ce code dans un navigateur. Comme vous pouvez le voir, les deux balises <h2> sont de couleur rouge, mais seule la balise <h2> de classe special est en italique :

Cette technique est également applicable aux attributs id, via le sélecteur #. Ici, toutes les balises <h2> sont de couleur green, mais seules la balise <h2> d’identifiant special est en italique :

Voyons le résultat dans un navigateur avec une commande Launch dans le menu Exécution :