Explique comment le navigateur détermine quels éléments doivent se voir appliquer des styles CSS.

Le navigateur détermine quels éléments appliquer avec des styles CSS en utilisant des mécanismes de recherche et de correspondance basés sur des sélecteurs CSS.

Le processus se déroule comme suit :

1. Analyse du CSS : Le navigateur analyse les fichiers CSS et les blocs <style> dans le HTML, créant une représentation interne des styles.
2. Analyse du HTML : Le navigateur analyse le HTML, créant l'Arbre DOM (Document Object Model).
3. Correspondance (Matching) : Pour chaque nœud dans l'Arbre DOM, le navigateur tente de le faire correspondre aux règles CSS. Cela se fait en vérifiant les sélecteurs dans les règles CSS. En général, le navigateur travaille de parties plus spécifiques du sélecteur à moins spécifiques (de droite à gauche). Par exemple, pour le sélecteur div article p, il trouve d'abord p, puis vérifie s'il est un descendant de article, qui lui-même est un descendant de div.
4. Application (Applying) : Si un nœud DOM correspond à une ou plusieurs règles CSS, le navigateur applique les styles correspondants à ce nœud. En cas de plusieurs règles applicables, le navigateur détermine l'ensemble final des styles en utilisant des règles de spécificité, d'ordre de déclaration et d'héritage.

Spécificité (Specificity) :

La spécificité est un algorithme utilisé par le navigateur pour calculer le poids d'un sélecteur CSS. Un sélecteur plus spécifique a une priorité plus élevée lors de l'application des styles. La spécificité est calculée en fonction du nombre d'ID, de classes/pseudoclasses/attributs et d'éléments/pseudoelements dans le sélecteur.

// a = nombre d'ID
// b = nombre de classes, pseudoclasses, attributs
// c = nombre d'éléments, pseudoelements
// Les styles en ligne ont la priorité la plus haute (1, 0, 0, 0)
// Le sélecteur `*` a une spécificité de (0, 0, 0)

Exemple de calcul de la spécificité :

• p: (0, 0, 1)
• .class: (0, 1, 0)
• #id: (1, 0, 0)
• div p: (0, 0, 2)
• div .class: (0, 1, 1)

Ordre des déclarations :

Si deux règles ont la même spécificité, celle déclarée en dernier dans le code CSS est appliquée.

Héritage (Inheritance) :

Certaines propriétés CSS sont héritées des éléments parents vers les enfants (par exemple, color, font-family). Si aucune valeur explicite n'est définie pour une propriété sur un élément, le navigateur recherche une valeur héritée en remontant dans l'Arbre DOM.

Ainsi, le navigateur détermine les styles pour un élément en faisant correspondre les sélecteurs, en résolvant les conflits par la spécificité et l'ordre de déclaration, et en tenant compte de l'héritage.