Introduction aux sélecteurs CSS

Exercice : CSS Diner

Passez les 32 niveaux de CSS Diner sur http://flukeout.github.io/.

A chaque niveau, il faut arriver à sélectionner en CSS les éléments qui bougent. Pensez à bien lire la documentation dans le panneau de droite, c’est un indice pour résoudre le problème. Vous pouvez passer le curseur sur les assiettes et bentos et voir à quoi ils correspondent dans la structure HTML.

Cet exercice va beaucoup utiliser les pseudo-elements et les pseudo-classes, en particulier celles qui permettent de sélectionner des enfants particulier https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes#tree-structural_pseudo-classes

Exercice : flexboxfroggy

Passer les 24 niveaux de https://flexboxfroggy.com/.

Les principales références conseillées sur les Flexbox CSS sont les suivantes :

• https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox
• https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Exercice : le Coloriage Magique

Retrouvez l’image qui se cache sur dans :

• soit dans Le Coloriage Magique n°1 https://jsbin.com/bubuwo/edit?css,output
• soit dans Le Coloriage Magique n°2 https://jsbin.com/qezajux/edit?css,output. Celui-ci est très similaire au précédent, mais un peu plus dur.

Remarques

• Dans ces deux exercices, le but est d’arriver à trouver les sélecteurs CSS qui permettent d’appliquer les mises en forme prévues et ainsi révéler une image.
• Vous aurez pour cela besoin d’autres sélecteurs que ceux présentés, mais ils sont tous vus dans CSS Diner, dont en particulier beaucoup de séelection sur les attributs.
• Il faut aussi savoir qu’une case à cocher correspond à une balise de la forme <input type="checkbox"/>, voir MDN. Une case à cocher est cochée si son attribut booléen checked est défini.

Exercice : le crible d’Eratosthène

Téléchargez les fichiers de départ eratosthene.html et eratosthene.css et réalisez un Crible d’Ératosthène. Exercice sur une idée d’Eric EDO.