TP 11 : Sélecteurs avancés

Observer la structure du HTML : il y a des paragraphes, des articles, et des aside. Chaque aside est dans un article, et donne des compléments d'information sur l'article en question. Il y a un paragraphe en-dehors de tout article (l'introduction), des paragraphes dans les articles, et des paragraphes dans les aside.

Remarque : pour simplifier, dans cet exercice, on va utiliser le sélecteur article pour sélectionner les articles et le sélecteur aside pour sélectionner les compléments d'information, bien que choix soit discutable, comme expliqué dans le cours sur les bonnes pratiques (il aurait probablement été plus adapté d'utiliser des classes).

Dans un premier temps, on voudrait donner un style particulier aux paragraphes des articles : on veut qu'ils soient en violet clair (plutôt qu'en blanc), justifiés, avec un alinéa et un gros padding à gauche et à droite. Cependant, on ne veut pas que ce style s'applique aux paragraphes des aside et à l'introduction. On va voir comment faire.

Ajouter la règle suivante dans le fichier CSS :

 p {
   text-indent: 3em;
   text-align: justify;
   padding: 0 5em;
   color: #DCF;
 }

Observer l'effet de ce changement de style, et constater qu'il s'applique à tous les paragraphes dans la page, ce qui est normal vu le sélecteur utilisé.

Le résultat ne convient pas, car le style s'applique au paragraphe d'introduction et aux paragraphes des aside. Une première idée est d'annuler le style pour les paragraphes en question ; par exemple pour le paragraphe d'introduction on peut ajouter la règle suivante :

 .intro {
   text-indent: revert;
   text-align: revert;
   padding: revert;
   color: revert;
 }

Essayer, et constater que ça fonctionne : la valeur revert a pour effet d'« annuler » les modifications effectuées, en remettant une propriété à une valeur « par défaut » intuitive, tout en prenant en compte la feuille de style du navigateur. En particulier, remarquer que la couleur obtenue pour le paragraphe d'introduction est le blanc, et non le noir : c'est parce que color est une propriété héritée. La valeur « par défaut » choisie par revert pour les propriétés héritées est inherit.

Ça fonctionne, mais ce n'est pas très pratique. En effet :

• Il faut appliquer cette règle à tous les paragraphes pour lesquels le style « général » n'est pas désiré. Si la page évolue, on peut avoir des surprises.
• Il faut préciser toutes les propriétés que l'on veut annuler. Si l'on change la règle générale sur les p, il faudra se souvenir d'annuler ses effets dans toutes les « règles d'annulation ».

En résumé, cette façon de faire n'est pas du tout robuste, et rend le HTML et le CSS difficiles à maintenir. On va faire mieux. Mettre la règle portant sur .intro en commentaire avant de passer à la suite.

On va maintenant écrire le CSS de façon plus logique : au lieu d'écrire une règle trop générale dont on doit annuler les effets ensuite, on va utiliser un sélecteur plus précis pour cibler uniquement les paragraphes qui nous intéressent.

Lorsque l'on est confronté·e à ce problème, il y a une solution radicale qui est toujours techniquement applicable : utiliser une classe. Dans notre cas, il suffirait d'ajouter une classe paragraphe-dans-article à tous les paragraphes souhaités, et d'ajouter dans le CSS une simple règle portant sur cette classe.

Ça fonctionnerait, mais ce n'est pas très pratique d'ajouter la classe aux trois quarts des paragraphes de la page ; et d'autre part, si la page évolue, il ne faudra pas oublier d'utiliser cette classe sur les nouveaux paragraphes. Cette solution est plus pratique que la précédente, mais n'est toujours pas idéale en termes de robustesse et de maintenabilité.

Le bon compromis dans notre cas est d'utiliser une combinaison de sélecteurs, traduisant au mieux notre souhait : on veut sélectionner les paragraphes qui sont dans des articles. Reprendre la règle sur p précédemment introduite, et remplacer le sélecteur (p) par article p. Que se passe-t-il ?

Le sélecteur choisi se lit comme suit : « sélectionner les éléments de type p qui ont pour ancêtre un élément de type article ». Cela exclut bien le paragraphe d'introduction, mais pas les paragraphes des aside. Expliquer pourquoi.

Remplacer le sélecteur article p par article > p, qui se lit « sélectionner les éléments de type p qui ont pour parent direct un élément de type article ». Constater que cela donne l'effet voulu, et expliquer pourquoi.

On voudrait à présent que les paragraphes qui suivent un titre de section n'aient pas d'alinéa. (C'est une règle typographique courante dans les publications anglophones.) Une nouvelle fois, on pourrait ajouter une classe à tous les paragraphes en question, mais ce n'est pas pratique : ce style dépend uniquement de la structure du texte.

C'est un cas d'utilisation idéal pour le sélecteur d'adjacence : h3 + p va sélectionner les paragraphes qui suivent immédiatement un h3. Ajouter une règle utilisant ce sélecteur pour retirer l'alinéa des paragraphes en question.

Il existe également un sélecteur d'adjacence plus général, h3 ~ p. Celui-ci va sélectionner les paragraphes qui sont précédés par un h3, mais il peut y avoir d'autres éléments entre les deux (tant qu'on reste dans le même parent). Ce sélecteur est plus rarement utile. On va l'utiliser ici pour donner un style différents aux premiers paragraphes d'un article, avant le premier h3. Noter que ça concerne un paragraphe dans le premier article, deux paragraphes dans le second, et aucun dans le troisième.

Pour obtenir cet effet, la solution la plus simple est d'abord d'attribuer le style voulu à tous les paragraphes, et de l'annuler derrière pour les paragraphes qui ne doivent pas être concernés. Ajouter une règle pour mettre en gras et italique tous les paragraphes qui sont dans un article, puis ajouter une règle avec le sélecteur h3 ~ p qui annule la mise en gras et italique. Constater que ça fonctionne et expliquer pourquoi.

NB : l'utilisation de cette technique dans ce contexte est discutable. L'effet obtenu donne l'impression que les paragraphes qui précèdent le premier titre de section font partie d'une introduction ou d'un « chapeau », mais c'est un aspect sémantique, non réductible à la structure du HTML. Pour illustrer le problème : il se pourrait qu'on doive plus tard ajouter des articles ayant à la fois un chapeau et des paragraphes avant le premier titre de section ; notre CSS ne fonctionnerait pas dans ce cas — il n'est pas robuste.

On va maintenant expérimenter les pseudo-classes. Ajouter la règle suivante dans le CSS :

:hover {
box-shadow: .6em .2em 1em white;
border-radius: .5em;
}

Faire passer le curseur de la souris un peu partout dans la page. Que se passe-t-il ?

Remplacer le sélecteur par aside:hover (sans espaces). Passer la souris dans la page : que se passe-t-il maintenant ?

Le sélecteur aside:hover est une conjonction de sélecteurs. Il sélectionne les éléments ayant à la fois deux caractéristiques :

• ils sont de type aside, et
• ils sont actuellement survolés par le curseur (pseudo-classe :hover).

La conjonction est obtenue en accolant les deux morceaux sans espace. Si on les sépare avec une espace, la signification est totalement différente ! Tester : modifier le sélecteur en aside :hover (avec une espace avant le deux-points). Essayer de survoler des éléments dans les aside. Pouvez-vous expliquer ce qui se passe ? Comment ce sélecteur est-il interprété ?

Enlever ensuite l'espace pour remettre le sélecteur dans l'état initial (aside:hover).

Il existe de nombreuses pseudo-classes. Parmi celles qui permettent d'obtenir un comportement dynamique, il y a :active. Ajouter la règle suivante dans le CSS :

 aside:active {
   text-transform: uppercase;
 }

Essayer de cliquer sur les aside (en gardant le clic enfoncé un petit moment). Que se passe-t-il ? Quel est l'effet de la pseudo-classe :active ?

C'est un peu extrême de mettre tout le texte en majuscules. Remplacer le sélecteur de la règle précédente par aside:active h3. Que se passe-t-il maintenant ? Constater que l'effet obtenu est le même, quel que soit l'endroit où on clique dans un aside (sur le h3 ou non). Expliquer pourquoi en précisant comment le sélecteur est interprété.

D'autres pseudo-classes permettent de sélectionner des éléments en fonction de leur position dans leur parent. Ajouter les règles suivantes au CSS :

 :first-child {
   border-top: 10px solid forestgreen;
 }
 :last-child {
   border-right: 10px solid darkred;
 }

Observer le résultat, et s'assurer de bien comprendre pourquoi chaque bordure verte ou rouge est apparue. Y a-t-il un ou plusieurs élément(s) qui ont à la fois une bordure verte en haut et une bordure rouge à droite ?

Ajouter maintenant les règles suivantes :

 :first-of-type {
   border-left: 10px solid orange;
 }
 :last-of-type {
   border-bottom: 10px solid lightblue;
 }

Constater qu'il y a davantage d'éléments avec une bordure orange à gauche ou bleue en bas, que d'éléments avec une bordure verte en haut ou rouge à droite. C'est parce que les pseudos-classes *-of-type considèrent indépendamment les listes d'éléments de chaque type. Par exemple, dans un article, il y a un premier et un dernier p, un premier et un dernier h3, un premier et un dernier aside, etc.

S'assurer de bien comprendre la présence des bordures des quatre types. Y a-t-il un ou plusieurs élément(s) qui ont les quatre bordures à la fois ?

Quand vous avez terminé, mettre en commentaire les quatre dernières règles ajoutées.

Pour sélectionner le premier élément d'un certain type, on peut s'appuyer sur la conjonction de sélecteurs. Supposons qu'on veuille mettre le premier paragraphe de chaque article en petites capitales. Laquelle des deux règles suivantes va fonctionner ?

 article > p:first-child {
   font-variant: small-caps;
 }

 article > p:first-of-type {
   font-variant: small-caps;
 }

Tester, garder la bonne règle, et expliquer pourquoi l'autre ne marche pas.

On teste maintenant les pseudo-éléments. Ajouter les règles suivantes dans le CSS :

 h1::first-letter {
   color: rebeccapurple;
   font-size: 200%;
   vertical-align: middle;
 }

 .intro::first-line {
   font-style: italic;
   font-weight: bold;
   font-size: 140%;
 }

 aside::after {
   content: "⁂";
   display: block;
   font-size: 2em;
   text-align: center;
 }

Expliquer ce que chacune de ces règles fait.

Quelle est la différence fondamentale de fonctionnement entre :first-child et ::first-line qui fait que le premier sélecteur est une pseudo-classe alors que le deuxième est un pseudo-élément (différence explicitée syntaxiquement par le nombre de deux-points employé) ?