mozilla
Vos résultats de recherche

    Spécificité

    Le concept

    La spécificité est le moyen par lequel un navigateur décide quelles valeurs de propriétés sont les plus appropriées pour un élément et doivent donc être appliquées. La spécificité ne s'applique seulement aux règles valides et ciblant au moins un élément, composées de différents types de sélecteurs.

    Comment est-ce calculé ?

    La spécificité est obtenue en concaténant le compte de chacun des types de sélecteurs. Ce n'est pas un poids qui est appliqué à l'expression correspondante.

    En cas d'égalité de spécificité, la déclaration trouvée le plus tard dans le CSS est appliquée.

    Note : la proximité des éléments dans l'arborescence du document n'a pas d'influence sur la spécificité.

    Ordre croissant de spécificité

    La liste suivante de sélecteurs est en ordre croissant :

    • Sélecteurs universels
    • Sélecteurs de type
    • Sélecteur de classe
    • Sélecteurs d'attribut
    • Pseudo-classes
    • Sélecteurs d'ID
    • Style en-ligne

    L'exception !important

    Lorsqu'une règle !important est utilisée dans une déclaration, cette déclaration écrase n'importe quelle autre règle déclarée dans le CSS, où qu'elle soit située. Toutefois, !important n'a rien à voir avec la spécificité.

    L'exception :not

    La pseudo-classe de négation :not n'est pas considéré comme une pseudo-classe lors du calcul de la spécificité. Toutefois, les sélecteurs placés dans la négation sont comptés comme des sélecteurs normaux.

    Voici un extrait de CSS :

    div.outer p {
      color:orange;
    }
    div:not(.outer) p {
      color: lime;
    }
    

    Utilisé avec l'extrait de HTML suivant :

    <div class="outer">
      <p>This is in the outer div.</p>
      <div class="inner">
        <p>This text is in the inner div.</p>
      </div>
    </div>
    

    Apparaîtra de la manière suivante à l'écran :

    This is in the outer div.

    This text is in the inner div.

    Spécificité fondé sur la forme

    La spécificité s'appuie sur la forme d'un sélecteur. Dans le cas suivant, le sélecteur compte comme un attribut dans l'algorithme de détermination de la spécificité bien qu'il cible un ID.

    Les déclarations de styles suivantes :

    * #foo {
      color: green;
    }
    *[id="foo"] {
      color: purple;
    }
    

    Utilisé avec l'extrait de code suivant :

    <p id="foo">I am a sample text.</p>
    

    Ressemblera à celà :

    I am a sample text.

    Car ceci cible le même élément mais le sélecteur d'ID a une spécificité supérieure.

    Ignorance de la proximité dans l'arborescence

    La déclaration de style suivante :

    body h1 {
      color: green;
    }
    html h1 {
      color: purple;
    }
    

    Avec le HTML suivant :

    <html>
    <body>
      <h1>Here is a title!</h1>
    </body>
    </html>
    

    Sera affiché de la manière suivante :

    Here is a title!

    Voir également

    Étiquettes et contributeurs liés au document

    Contributors to this page: teoli, FredB
    Dernière mise à jour par : teoli,