mozilla
Vos résultats de recherche

    Sélecteurs d'attribut

    Résumé

    Les sélecteurs d'attribut ciblent un élément en utilisant la présence d'un certain attribut ou de la valeur d'un attribut.

    [attr]
    Représente un élément avec un attribut nommé attr.
    [attr=valeur]
    Représente un élément avec un attribut nommé attr dont la valeur est exactement « valeur ».
    [attr~=valeur]
    Représente un élément avec un attribut nommé attr dont la valeur est une liste séparée par des espaces, dont l'un d'eux est exactement « valeur ».
    [attr|=valeur]
    Représente un élément avec un attribut nommé attr dont la valeur est une liste séparée par un tiret (-), dont l'un d'eux est exactement « valeur ». Il peut être utilisé pour cibler les codes de langue utilisant la sous-dénomination.
    [attr^=valeur]
    Représente un élément avec un attribut nommé attr dont la valeur est préfixée par « valeur ».
    [attr$=valeur]
    Représente un élément avec un attribut nommé attr dont la valeur est suffixée par « valeur ».
    [attr*=valeur]
    Représente un élément avec un attribut nommé attr dont la valeur contient au moins une occurence de « valeur » comme sous-chaîne.

    Exemples

    <style type="text/css">
        /* Tous les spans avec l'attribut « lang » sont en gras */
        span[lang] {font-weight:bold;}
     
        /* Tous les spans en portugais sont en vert */
        span[lang="pt"] {color:green;}
    
        /* Tous les spans en anglais américain sont en bleu */
        span[lang~="en-us"] {color: blue;}
    
        /* N'importe quel span en chinois est en rouge, cible le simplifié (zh-CN) ou le traditionnel (zh-TW) */
        span[lang|="zh"] {color: red;}
    
        /* Tous les liens internes ont une couleur de fond dorée */
        a[href^="#"] {background-color:gold}
    
        /* Tous les liens dont les urls termines en « .cn » sont en rouge */
        a[href$=".cn"] {color: red;}
    
        /* Tous les liens contenant « exemple » dans l'url ont un fond gris */
        a[href*="exemple"] {background-color: #CCCCCC;}
    </style>
    

    Utilisé avec le code HTML suivant :

    <div class="bonjour-exemple">
        <a href="http://exemple.com">Anglais :</a>
        <span lang="en-us en-gb en-au en-nz">Hello World!</span>
    </div>
    <div class="bonjour-exemple">
        <a href="#portugais">Portugais :</a>
        <span lang="pt">Olá Mundo!</span>
    </div>
    <div class="bonjour-exemple">
        <a href="http://exemple.cn">Chinois (simplifié) :</a>
        <span lang="zh-CN">世界您好!</span>
    </div>
    <div class="bonjour-exemple">
        <a href="http://exemple.cn">Chinois (traditionnel) :</a>
        <span lang="zh-TW">世界您好!</span>
    </div>
    

    Devrait donner le résultat suivant :

    Anglais : Hello World!

    Portugais : Olá Mundo!

    Chinois (simplifié) : 世界您好!

    Chinois (traditionnel) : 世界您好!

    Spécifications

    Compatibilité des navigateurs

    Fonction Chrome Firefox (Gecko) Internet Explorer Opera Safari
    Support de base (Oui) 1.0 (1.7 ou moins) 7 9 3
    Fonction Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
    Support de base ? 1.0 (1) ? ? ?

    Références

    Étiquettes et contributeurs liés au document

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