Sélecteurs d'attributs

6.1 Types de sélecteurs d'attributs

Les sélecteurs d'attributs en CSS permettent de sélectionner des éléments en fonction de la présence d'attributs, de leurs valeurs ou de parties de valeurs des attributs. Ils offrent des possibilités flexibles et puissantes pour styliser les éléments HTML, ce qui les rend particulièrement utiles pour travailler avec du contenu dynamique et des pages web interactives.

Types de sélecteurs d'attributs

• Sélecteur d'attribut (Attribute Selector)
• Sélecteur d'attribut avec valeur (Attribute Selector with Value)
• Sélecteur d'attribut avec valeur de préfixe (Attribute Selector with Prefix)
• Sélecteur d'attribut avec valeur de suffixe (Attribute Selector with Suffix)
• Sélecteur d'attribut contenant une sous-chaîne (Attribute Selector with Substring)
• Sélecteur d'attribut avec espace de séparation (Attribute Selector with Whitespace)
• Sélecteur d'attribut avec séparation par trait d'union (Attribute Selector with Hyphen)

6.2 Sélecteur d'attribut

Le sélecteur d'attribut sélectionne les éléments, qui ont l'attribut spécifié, indépendamment de sa valeur.

Syntaxe :

    
      [attribut] {
        propriété: valeur;
        propriété: valeur;
      }
    
  

Exemple :

    
      /* Sélectionne tous les éléments qui ont l'attribut title */
      [title] {
        color: blue;
      }
    
  

    
      <p title="C'est un titre">Ce texte sera bleu.</p>
      <p>Ce texte ne sera pas bleu.</p>
    
  

6.3 Sélecteur d'attribut avec valeur

Le sélecteur d'attribut avec valeur sélectionne les éléments dont les attributs ont la valeur spécifiée.

Syntaxe :

    
      [attribut="valeur"] {
        propriété: valeur;
        propriété: valeur;
      }
    
  

Exemple :

    
      /* Sélectionne tous les éléments dont l'attribut title a pour valeur "Exemple" */
      [title="Exemple"] {
        color: green;
      }
    
  

    
      <p title="Exemple">Ce texte sera vert.</p>
      <p title="Autre exemple">Ce texte ne sera pas vert.</p>
    
  

6.4 Sélecteur d'attribut avec préfixe

Le sélecteur d'attribut avec préfixe sélectionne les éléments dont les attributs commencent par la valeur spécifiée.

Syntaxe :

    
      [attribut^="valeur"] {
        propriété: valeur;
        propriété: valeur;
      }
    
  

Exemple :

    
      /* Sélectionne tous les éléments dont l'attribut title commence par "Début" */
      [title^="Début"] {
        color: red;
      }
    
  

    
      <p title="Début du texte">Ce texte sera rouge.</p>
      <p title="Pas début">Ce texte ne sera pas rouge.</p>
    
  

6.5 Sélecteur d'attribut avec suffixe

Le sélecteur d'attribut avec suffixe sélectionne les éléments dont les attributs se terminent par la valeur spécifiée.

Syntaxe :

    
      [attribut$="valeur"] {
        propriété: valeur;
        propriété: valeur;
      }
    
  

Exemple :

    
      /* Sélectionne tous les éléments dont l'attribut title se termine par "fin" */
      [title$="fin"] {
        color: orange;
      }
    
  

    
      <p title="C'est la fin">Ce texte sera orange.</p>
      <p title="C'est le début">Ce texte ne sera pas orange.</p>
    
  

6.6 Sélecteur d'attribut contenant une sous-chaîne

Le sélecteur d'attribut contenant une sous-chaîne sélectionne les éléments dont les attributs contiennent la valeur spécifiée.

Syntaxe :

    
      [attribut*="valeur"] {
        propriété: valeur;
        propriété: valeur;
      }
    
  

Exemple :

    
      /* Sélectionne tous les éléments dont l'attribut title contient "milieu" */
      [title*="milieu"] {
        color: purple;
      }
    
  

    
      <p title="C'est le milieu du texte">Ce texte sera violet.</p>
      <p title="Pas de milieu ici">Ce texte ne sera pas violet.</p>
    
  

6.7 Sélecteur d'attribut avec espace de séparation

Le sélecteur d'attribut avec espace de séparation sélectionne les éléments dont l'attribut contient une ou plusieurs valeurs séparées par des espaces. C'est utile pour sélectionner des éléments avec des classes ou rôles spécifiques.

Syntaxe :

    
      [attribut~="valeur"] {
        propriété: valeur;
        propriété: valeur;
      }
    
  

Exemple :

    
      /* Sélectionne tous les éléments dont l'attribut class contient "highlight" dans la liste de classes */
      [class~="highlight"] {
        background-color: yellow;
      }
    
  

    
      <p class="highlight special">Ce texte aura un fond jaune.</p>
      <p class="special highlight">Ce texte aura aussi un fond jaune.</p>
      <p class="special">Ce texte n'aura pas de fond jaune.</p>
    
  

6.8 Sélecteur d'attribut avec trait d'union

Le sélecteur d'attribut avec séparation par trait d'union sélectionne les éléments dont l'attribut contient la valeur spécifiée ou commence par la valeur spécifiée, suivie d'un trait d'union.

Syntaxe :

    
      [attribut|="valeur"] {
        propriété: valeur;
        propriété: valeur;
      }
    
  

Exemple :

    
      p[lang|="ru"] {
        font-style: italic;
      }
    
  

    
      <p lang="ru">Ce texte sera en italique.</p>
      <p lang="ru-RU">Ce texte sera aussi en italique.</p>
      <p lang="en">This text will not be italicized.</p>
    
  

1

Étude/Quiz

Bases du CSS, niveau 12, leçon 6

Indisponible

Bases du CSS

Bases du CSS

Ouvrir