Le sélecteur de type “balise HTML”
See the Pen
balise HTML by BENOIT BLEIN (@BENOIT-BLEIN-the-sans)
on CodePen.
Action : remplacez red par blue dans l’onglet CSS et voyez le résultat 🙂
Le sélecteur de type “classe”
See the Pen
Le sélecteur de type “classe” by BENOIT BLEIN (@BENOIT-BLEIN-the-sans)
on CodePen.
Action : renommez la classe CSS mon-titre, et constatez la disparition du bleu. Ensuite, créez une instruction CSS pour la classe toto pour assigner une autre couleur au titre h1 (par exemple green).
Le sélecteur de type “identifiant”
See the Pen
Le sélecteur de type “identifiant” by BENOIT BLEIN (@BENOIT-BLEIN-the-sans)
on CodePen.
Action : transformez l’identifiant en classe, et faites en sorte que ça fonctionne (indice, vous devrez aussi modifier le HTML).
Le pseudo-sélecteur de type “:hover”
See the Pen
Le pseudo-sélecteur de type “:hover” by BENOIT BLEIN (@BENOIT-BLEIN-the-sans)
on CodePen.
Action : modifiez la couleur de survol pour avoir un autre rendu (on en a déjà vu plusieurs jusqu’à présent).
Le sélecteur associatif
See the Pen
Le sélecteur associatif by BENOIT BLEIN (@BENOIT-BLEIN-the-sans)
on CodePen.
Action : ajoutez la classe bouton à un lien qui n’en dispose pas et constatez le changement d’apparence.
Le sélecteur descendant
See the Pen
Le sélecteur descendant by BENOIT BLEIN (@BENOIT-BLEIN-the-sans)
on CodePen.
Action : ajoutez la classe bouton à un lien qui n’en dispose pas et constatez le changement d’apparence.
Le sélecteur enfant
See the Pen
Le sélecteur enfant by BENOIT BLEIN (@BENOIT-BLEIN-the-sans)
on CodePen.
Action : ajoutez une balise div de classe post-header (sans oublier la balise fermante) autour du lien (balise a), et constatez que le CSS ne s’applique plus.
Le mot magique en cas d’urgence
See the Pen
Le mot magique en cas d’urgence by BENOIT BLEIN (@BENOIT-BLEIN-the-sans)
on CodePen.
Action : supprimez le mot !important dans l’onglet CSS et constatez que les règles d’importance “normales” reprennent leurs droits.
H1, H2, H3…. je me lance sur Divi
See the Pen
styles divi h1 h2 h3 by BENOIT BLEIN (@BENOIT-BLEIN-the-sans)
on CodePen.
Action : supprimez le mot !important dans l’onglet CSS et constatez que les règles d’importance “normales” reprennent leurs droits.