Back

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

    • Dans le HTML, nous avons vu les attributs d’élément. En CSS, on peut utiliser ces attributs pour cibler les éléments.
    • Les sélecteurs d’attribut en CSS vous permettent de cibler des éléments HTML en fonction de leurs attributs et de leurs valeurs. Vous pouvez utiliser ces sélecteurs pour appliquer des styles à des éléments qui correspondent à des critères spécifiques en fonction de leurs attributs.
    • Les sélecteurs d’attribut permettent de cibler un élément selon la présence d’un attribut ou selon la valeur donnée d’un attribut.
      1. Structure du sélecteur d’attribut :
        • Pour cibler des éléments en fonction de leurs attributs, utilisez le sélecteur d’attribut en utilisant la syntaxe suivante :

            • [element[attribut="valeur"]] {
  /* styles à appliquer aux éléments qui correspondent au critère attribut="valeur" */
}

        • element : Il s’agit du type d’élément HTML que vous souhaitez cibler (par exemple, a pour les liens, input pour les champs de formulaire, etc.).
        • attribut : C’est le nom de l’attribut que vous souhaitez utiliser comme critère de sélection (par exemple, href pour les liens, type pour les champs de formulaire, etc.).
        • valeur : C’est la valeur de l’attribut que vous souhaitez cibler (par exemple, une URL pour href, un type de champ pour type, etc.).
  3. Il existe quatre types généraux de sélecteurs d’attributs :



  4. Sélecteurs d’attribut simple

      • En CSS3, vous pouvez utiliser des sélecteurs d’attribut simples pour cibler des éléments HTML en fonction de leurs attributs. Ces sélecteurs vous permettent de spécifier des conditions pour sélectionner des éléments qui correspondent à certaines valeurs d’attributs.
      • Les sélecteurs d’attribut simples en CSS vous permettent de cibler des éléments HTML en fonction d’un attribut spécifique, sans considérer la valeur de cet attribut.
      • Vous pouvez utiliser ces sélecteurs pour appliquer des styles à des éléments qui ont un attribut particulier, peu importe la valeur de cet attribut.
    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:
          • Résultat

          Sélecteurs d'attribut en CSS

          a[href][title] {color: red;}

  5. 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.
          • 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:
          • Résultat

          Sélecteurs d'attribut en CSS

          a[href="https://www.apcpedagogie.com/"] {color: red;}

        • Dans cet exemple CSS, on cible tous les éléments a (liens) qui ont un attribut href avec une valeur exacte de « https://www.apcpedagogie.com/« . Les styles spécifiés seront appliqués uniquement aux liens avec cette valeur d’attribut href.
    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:
          • Résultat

          Sélecteurs d'attribut en CSS

          a[href="https://www.apcpedagogie.com/"][title="apcpedagogie"] {color: red;}

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

    1. Correspondance de sous-chaîne avec des sélecteurs d’attributs
        2. 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
}

  7. 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).

  8. Applications les sélecteurs d’attribut en CSS

    1. App 01
      • Soit la pge html suivante:

          • <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Exercice Sélecteurs d'Attribut CSS</title>
</head>
<body>
    <h1>Sélecteurs d'Attribut CSS</h1>
    
    <h2>Liens</h2>
    <a href="https://www.example.com" title="Site Web Example">Lien 1</a>
    <a href="https://www.example.com">Lien 2</a>
    <a title="Lien sans URL">Lien 3</a>
    
    <h2>Images</h2>
    <img src="image1.jpg" alt="Image 1" class="img-highlight">
    <img src="image2.jpg" alt="Image 2">
    <img src="image3.jpg" alt="Image 3" class="img-highlight">
    
    <h2>Paragraphes</h2>
    <p data-category="important">Ce paragraphe est important.</p>
    <p>Ceci est un paragraphe normal.</p>
    <p data-category="important">Un autre paragraphe important.</p>
</body>
</html>

      • Dans une feuille de style répondre aux questions suivantes:
        • Sélecteurs d’attribut simple
          • Comment sélectionner tous les paragraphes qui ont un attribut data-category ?
          • Comment sélectionner tous les liens qui ont un attribut target ?
          • Comment sélectionner toutes les images qui ont un attribut class ?
          • Comment sélectionner tous les éléments div qui ont un attribut id ?
          • Comment sélectionner tous les éléments input qui ont un attribut type ?
        • Sélecteurs de valeur d’attribut exacte
          • Comment attribuer une couleur bleue avec une police Arial de taille 16 px pour tous les liens qui ont un attribut title égal à « Site Web Example » ?
          • Comment attribuer une couleur verte pour toutes les images qui ont un attribut alt égal à « Image 1 » ?
          • Comment attribuer un arrière-plan jaune pour tous les paragraphes qui ont un attribut data-category égal à « important » ?
          • Comment attribuer une bordure rouge pour tous les liens qui ont un attribut href égal à « https://www.example.com » ?
          • Comment attribuer une couleur de texte rouge pour tous les éléments div qui ont un attribut id égal à « main » ?
        • Sélecteurs de valeur d’attribut de correspondance partielle
          • Comment attribuer une bordure en pointillés aux images qui ont un attribut class contenant « img-highlight » ?
          • Comment attribuer une couleur de fond orange aux paragraphes qui ont un attribut data-category contenant « important » ?
          • Comment attribuer une police en gras aux liens qui ont un attribut href contenant « example » ?
          • Comment attribuer une couleur de texte violette aux éléments div qui ont un attribut id contenant « container » ?
          • Comment attribuer une ombre à tous les éléments input qui ont un attribut type contenant « text » ?
        • Sélecteurs d’attributs d’un type particulier
          • Comment attribuer une police en italique aux éléments p avec un attribut data-category ?
          • Comment attribuer une couleur de fond grise aux éléments div avec un attribut id ?
          • Comment attribuer une couleur de texte rouge aux liens (a) avec un attribut target ?
          • Comment attribuer une bordure de 2 pixels aux éléments img avec un attribut alt ?
          • Comment attribuer une couleur de fond cyan aux éléments input avec un attribut type ?
      Solution 

      /* Sélectionner tous les liens avec un attribut target */
a[target] {
  
}
/* Sélectionner toutes les images avec un attribut class */
img[class] {
    /* Styles CSS */
}
/* Sélectionner tous les div avec un attribut id */
div[id] {
  background-color: greenyellow;
}
/* Sélectionner tous les input avec un attribut type */
input[type] {
    /* Styles CSS */
}
/* Sélectionner tous les liens avec un attribut title égal à "Site Web Example" */
a[title="Site Web Example"] {
    color: red;
    font-family: Arial, sans-serif;
}
/* Sélectionner toutes les images avec un attribut alt égal à "Image 1" */
img[alt="Image 1"] {
    color: green;
}
/* Sélectionner tous les paragraphes avec un attribut data-category égal à "important" */
p[data-category="important"] {
    background-color: yellow;
}
/* Sélectionner tous les liens avec un attribut href égal à "https://www.example.com" */
a[href="https://www.example.com"] {
    border: 1px solid red;
}
/* Sélectionner tous les div avec un attribut id égal à "main" */
div[id="main"] {
    color: red;
}
/* Sélectionner toutes les images avec un attribut class contenant "img-highlight" */
img[class*="img-highlight"] {
    border: 1px dashed #999;
}
/* Sélectionner tous les paragraphes avec un attribut data-category contenant "important" */
p[data-category*="important"] {
    background-color: orange;
}
/* Sélectionner tous les liens avec un attribut href contenant "example" */
a[href*="example"] {
    font-weight: bold;
}
/* Sélectionner tous les div avec un attribut id contenant "container" */
div[id*="container"] {
    color: purple;
}
/* Sélectionner tous les input avec un attribut type contenant "text" */
input[type*="text"] {
    box-shadow: 2px 2px 4px #888;
}
/* Sélectionner tous les paragraphes (p) avec un attribut data-category */
p[data-category] {
    font-style: italic;
}
/* Sélectionner tous les div avec un attribut id */
div[id] {
    background-color: #ccc;
}
/* Sélectionner tous les liens (a) avec un attribut target */
a[target] {
    color: red;
}
/* Sélectionner toutes les images (img) avec un attribut alt */
img[alt] {
    border: 2px solid #333;
}
/* Sélectionner tous les input avec un attribut type */
input[type] {
    background-color: cyan;
}


    2. App 02



Les sélecteurs simples en CSS
Les combinateurs CSS
author avatar
Riadh HAJJI

Riadh HAJJI

You may also like

Protégé : Correction applications les opérateurs en JavaScript
5 octobre, 2023

Il n’y a pas d’extrait, car cette publication est protégée.

Les pseudo-éléments en CSS
11 décembre, 2022

Les sélecteurs simples en CSS Les sélecteurs d’attribut en CSS Les combinateurs CSS Les pseudo-classes en CSS Les pseudo-éléments en CSS Exercices en CSS les sélecteurs Série 01 (Correction) Exercices en CSS les sélecteurs Série 02 (Correction) Exercices en CSS …

Examen 5 en HTML , CSS et Bootstrap
19 mai, 2022

Examen en HTML et CSS Examen 2 en HTML et CSS Examen 3 en HTML , CSS et JS Examen 4 en HTML , CSS et JS Examen 5 en HTML , CSS et Bootstrap Examen 5 en HTML , …