Animation CSS

Utiliser les animations en CSS pour faire un loader (exemple 1)

L'ordre dans la source

Un article ayant la classe span.outer. Le texte de ce paragraphe est de couleur verte, c'est le selecteur span.outer p qui est appliqué.

Un paragraphe ayant la classe span.inner. Le texte de ce paragraphe est de couleur verte, c'est le selecteur span.outer p qui est appliqué car il est écrit après le sélecteur article span.inner dans la source. Les deux sélécteurs ayant la même spécificité (1 classe + 1 élément), c'est l'ordre dans la source qui compte.

La spécificité

Un article ayant la classe span.alice. Le texte de ce paragraphe est de couleur bleue, c'est le selecteur span.alice p qui est appliqué car il possède la plus grande spécificité (1 classe + 1 élément), supérieure à span.alice (1 classe).

Un paragraphe ayant la classe span.bob. Le texte de ce paragraphe est de couleur rouge orangé, c'est le selecteur .alice .bob qui est appliqué car il possède la plus grande spécificité (2 classes), supérieure à p.bob (1 classe + 1 élément) et à .bob (1 classe).

L'importance

Un article ayant la classe .base

Un paragraphe ayant la classe span.important. Le texte de ce paragraphe est de couleur rouge, c'est la propriété color: red du selecteur span.important qui est appliqué car il y a la déclaration !important.