Les sélecteurs d’attribut en CSS

Sélecteurs d’attribut en CSS

  1. Objectifs

    • Connaitre les sélecteurs d’attribut en CSS
  2. Présentation




  3. sélecteurs d’attribut simple

    1. [attr]
      • Le sélecteur [attr] est utilisé pour sélectionner des éléments avec un attribut spécifié.
      • Permet de cibler un élément qui possède un attribut attr.
      • Exemple:
          HTML

        • Soit le code HTML suivant:
        •     <p>Un <a href="#" target="_blank">lien</a> vide</p>
              <p class="test">Un autre <a href="#">lien</a> vide</p>
              <p>Un troisième <a href="#">lien</a> vide</p>
          
          CSS

        • On va pouvoir cibler tous les éléments a qui possèdent un attribut target en écrivant a[target]
        • a[target]{
               background-color:red;
          }
        • ou encore tous les éléments p qui possèdent un attribut class avec p[class].
        • p[class]{
               background-color:blue;
          }
          Résultat

          Sélecteurs d'attribut en CSS

    2. [attr][attr]
      • Il est possible de sélectionner en fonction de la présence de plus d’un attribut. On fait ceci en enchaînant les sélecteurs d’attributs ensemble.
      • Par exemple, pour mettre en gras le texte de tout lien hypertexte HTML qui a à la fois un attribut href et un attribut title, on écrit :
        • HTML

        • Soit le code HTML suivant:
        • <a href="https://www.apcpedagogie.com/" title="apcpedagogie">apcpedagogie</a><br />
          <a href="https://www.apcpedagogie.com">apcpedagogie Info</a><br />
          <a title="n'est pas un lien">apcpedagogie n'est pas un lien</a>
          
          CSS

        • On va pouvoir cibler tous les éléments a qui possèdent un attribut href et [title] en écrivant:
        • a[href][title] {color: red;}
          Résultat

          Sélecteurs d'attribut en CSS

  4. Sélecteurs de valeur d’attribut exacte

    1. [attr=valeur]
      • Permet de cibler un élément qui possède un attribut attr dont la valeur est exactement valeur.
      • Cible un élément possédant un attribut avec une valeur exacte.
      • /*tous les éléments p en langue française auront la couleur rouge*/
        p[lang=fr] {
         color: red
        }
        

        Exemple

          HTML

        • Soit le code HTML suivant:
        • <a href="https://www.apcpedagogie.com/" title="apcpedagogie">apcpedagogie</a><br />
          <a href="https://www.apcpedagogie.com/">apcpedagogie Info</a><br />
          <a title="n'est pas un lien">apcpedagogie n'est pas un lien</a>
          
          CSS

        • On va pouvoir cibler tous les éléments a qui possèdent un attribut href et une valeur "https://www.apcpedagogie.com/" en écrivant:
        • a[href="https://www.apcpedagogie.com/"] {color: red;}
          Résultat

          Sélecteurs d'attribut en CSS

    2. [attr=valeur][attr=valeur]
      • Comme pour la sélection d’attributs, vous pouvez enchaîner plusieurs sélecteurs de valeurs d’attributs pour sélectionner un seul document.
      • Par exemple, pour doubler la taille du texte de n’importe quel HTML lien hypertexte qui a à la fois un href avec une valeur de https://www.apcpedagogie.com/ et un titre attribut avec une valeur de apcpedagogie home, vous écririez :
      • a[href="https://www.apcpedagogie.com/"][title="apcpedagogie home"] {font-size: 200%;}

        Exemple

          HTML

        • Soit le code HTML suivant:
        • <a href="https://www.apcpedagogie.com/" title="apcpedagogie">apcpedagogie</a><br />
          <a href="https://www.apcpedagogie.com/">apcpedagogie Info</a><br />
          <a title="n'est pas un lien">apcpedagogie n'est pas un lien</a>
          
          CSS

        • On va pouvoir cibler tous les éléments a qui possèdent un attribut href et une valeur "https://www.apcpedagogie.com/" avec un attribut égale à title et une valeur "apcpedagogie" écrivant:
        • a[href="https://www.apcpedagogie.com/"][title="apcpedagogie"] {color: red;}
          Résultat

          Sélecteurs d'attribut en CSS

  5. Sélecteurs de valeur d’attribut de correspondance partielle

    1. Correspondance de sous-chaîne avec des sélecteurs d’attributs
      • Type Description
        [element~="web"] Sélectionne n’importe quel élément avec un attribut element dont la valeur contient le mot web dans une liste séparée par des espaces de mots

        [element*="web"] Sélectionne n’importe quel élément avec un attribut element dont la valeur contient la sous-chaîne web
        [element^="web"] Sélectionne n’importe quel élément avec un attribut element dont la valeur commence par web
        [element$="web"] Sélectionne n’importe quel élément avec un attribut element dont la valeur se termine par web
        [element|="web"] Sélectionne tout élément avec un attribut element dont la valeur commence par web suivi d’un tiret (U+002D) ou dont la valeur est exactement égale à web
    2. [attr~=valeur]
      • Cible un élément possédant un attribut dont la valeur appartient à une liste de valeurs séparées par des espaces.
      • Permet de cibler un élément qui possède un attribut attr dont la valeur est valeur. Cette forme permet de fournir une liste de valeurs, séparées par des blancs, à tester. Si au moins une de ces valeurs est égale à celle de l’attribut, l’élément sera ciblé.
      • /*on vise tous les liens qui contiennent entre autres le mot exemple */
        a[title~="exemple"] {
        color: red
        }
        
    3. [attr*=valeur]
      • Cible un élément possédant un attribut dont la valeur contient au moins une occurrence d’une chaîne de caractères correspondant à celle-ci.
      • Permet de cibler un élément qui possède un attribut attr et dont la valeur contient au moins une occurrence de valeur dans la chaîne de caractères.
      • /* vise tous les liens dont l'url contient "exemple" */
        a[href*="exemple"] {
        color:red
        }
        
      • Parfois, vous souhaitez sélectionner des éléments en fonction d’une partie de leurs valeurs d’attribut, mais les valeurs en question ne sont pas des listes de mots séparés par des espaces. Dans ces cas, vous pouvez utilisez la forme [att*="val"] pour faire correspondre les sous-chaînes qui apparaissent n’importe où à l’intérieur du valeurs d’attribut.
      • Par exemple, le CSS suivant correspond à tout élément span dont L’attribut class contient la sous-chaîne cloud, de sorte que les deux planètes « nuageuses » correspondent, car illustré à la figure 2-12 :

    4. [attr^=valeur]
      • Cible un élément possédant un attribut dont la première valeur commence par celle-ci. Elle peut aussi être suivie d’un tiret.
      • Permet de cibler un élément qui possède un attribut attr dont la valeur commence par valeur.
      • [class^="maclasse"] {
        color: red
        }
        
    5. [attr$=valeur]
      • Cible un élément possédant un attribut dont la dernière valeur se termine par celle-ci. Elle peut être précédée d’un tiret.
      • Permet de cibler un élément qui possède un attribut attr dont la valeur se termine par valeur.
      • [class$="maclasse"] {
        color: red
        }
        
    6. [attr|=valeur]
      • Cible un élément possédant un attribut spécifié en commençant par la valeur nommée dans l’attribut. Celle-ci peut être seule ou suivie d’un tiret.
      • Permet de cibler un élément qui possède un attribut attr dont la valeur est exactement valeur ou dont la valeur commence par valeur suivi immédiatement d’un tiret (U+002D). Cela peut notamment être utilisé pour effectuer des correspondances avec des codes de langues.
      • /*on vise la classe commençant par le mot exemple, vise également exemple-motclé ou exemple-autremotclé... */
        [class|="exemple"] {
         color: red
        }
        
  6. Sélecteurs d’attributs d’un type particulier

    1. [attr operateur valeur i]
      • On peut ajouter un i (ou I) avant le crochet de fin. Dans ce cas, la casse ne sera pas prise en compte (pour les caractères contenus sur l’intervalle ASCII).
    2. [attr operateur valeur s]
      • Ajouter un s (ou S) avant le crochet fermant permettra d’effectuer une comparaison de valeur sensible à la casse (pour les caractères ASCII).
  7. Applications les sélecteurs d’attribut en CSS



Abonnez vous à notre chaîne YouTube gratuitement