Sélecteurs CSS avancés

Licence professionnelle ATC Webmestre

Alexandre NiveauFabrice Maurel

Enseignement des technologies du Web

 

Sélecteurs CSS avancés

Notes de cours

Travail personnel

Objectifs

Le TP vise à vous faire manipuler les sélecteurs avancés. Les deux exercices portent sur la nourriture, mais c'est un hasard.

Exercice 1 — CSS Diner

Cet exercice est optionnel. Si vous avez l'impression qu'il vous embrouille plus qu'il ne vous aide, passez à la suite.

Essayer le jeu CSS Diner, qui vise à apprendre les sélecteurs CSS, des plus basiques au plus complexes. Chaque niveau est une sorte de leçon sur un sélecteur particulier (les informations sont données dans l'encadré de droite), l'objectif étant d'arriver à sélectionner les bons objets en entrant un sélecteur CSS. Attention : vos sélecteurs ne doivent pas mentionner la table, ça ne fonctionnera pas (c'est un bug). Par exemple, la solution du premier niveau est le sélecteur plate, le sélecteur .table plate ne marchera pas.

Avec ce qui a été vu en cours, vous pouvez aller jusqu'au niveau 15. Passez ensuite en priorité à l'exercice suivant, surtout si vous êtes débutant·e. À noter que, malheureusement, à partir du niveau 19 les exercices ne sont pas toujours très pertinents, mais ça reste intéressant.

Bonne chance !

Exercice 2 — Application des sélecteurs avancés

Un corrigé de cet exercice est disponible (lien vers le CSS commenté ; archive).

Récupérer cette page HTML (archive) et l'utiliser pour tester les différents sélecteurs avancés en répondant aux questions suivantes, sans changer le code HTML.

  1. Pour commencer, réduire la largeur du body, par exemple à 40 em, ce qui permet d'avoir des lignes d'environ 80 caractères quelle que soit la taille de la police.
  2. Mettre en valeur la première lettre de chaque paragraphe, soit en modifiant sa taille ou sa couleur, soit en en faisant une lettrine (drop cap).
    1. Mettre en italique la première ligne de chaque paragraphe.
    2. Modifier votre règle pour que seule la première ligne du premier paragraphe de chaque partie soit en italique.
  3. Faire en sorte que l'alignement des titres soit alterné, une fois à gauche, une fois à droite. Les paragraphes doivent rester en place.
  4. À cause de la question précédente, la séparation entre les parties n'est pas évidente : ajouter une bordure autour (ou au-dessous) de chaque titre pour bien séparer les parties.
  5. Le dernier paragraphe contient uniquement une formule consacrée.
    1. Le mettre en valeur comme vous le voulez (centré, gras…).
    2. Est-ce que la méthode que vous avez employée vous semble correcte (c'est-à-dire propre, robuste, sémantique…) ? Si vous aviez le droit de modifier le HTML, auriez-vous choisi la même solution ?
  6. Ajouter le caractère de décoration suivant : « ❦ » au début et à la fin de chaque titre de partie.
  7. Mettre ce caractère de décoration en rouge.
  8. Faire en sorte qu'au survol d'un paragraphe, ce paragraphe change de couleur de fond.
  9. Même question, mais cette fois le paragraphe survolé et le paragraphe suivant dans la même partie doivent changer de couleur de fond.
  10. En n'utilisant qu'une seule règle CSS, faire en sorte que tous les titres apparaissent en petites capitales, sauf lorsqu'ils sont survolés.
  11. Faire en sorte qu'au survol d'un titre, les paragraphes de cette partie changent de couleurs de texte et de fond, mais pas les autres. Attention, la solution est simple, mais pas évidente à trouver ; ne pas hésiter à demander de l'aide. (Indice : ce n'est pas faisable avec une seule règle.)