sélecteurs

Présence d'un attribut

On aimerait sélectionner tous les éléments ayant un attribut donné.

Dans l'exemple ci-dessous, on sélectionne toutes les ancres ayant un attribut target.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> attribut  </title>
        <style>
         a[target]{
            background-color: yellow;
         }
        </style>
    </head>
    <body>
          <p>  <a href="#"> lien 1 </a> et  <a href="#" target="_blank"> lien 2 </a> </p>
          <p>   <a href="#" target="coucou"> lien 3</a> et  <a href="#"> lien 4 </a>  </p>
    </body>
</html>

Valeur d'un attribut

On souhaite maintenant sélectionner tous les éléments ayant un attribut donné de valeur donnée.

Ci-dessous on sélectionne par exemple tous les éléments ayant un attribut target dont la valeur est _blank .

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> valeur  </title>
        <style>
         a[target="_blank"]{
            background-color: yellow;
         }
        </style>
    </head>
    <body>
          <p>  <a href="#"> lien 1 </a> et  <a href="#" target="_blank"> lien 2 </a> </p>
          <p>   <a href="#" target="coucou"> lien 3</a> et  <a href="#"> lien 4 </a>  </p>
          <p>   <a href="#" target="_blank"> lien 5</a> et  <a href="#" target="oups"> lien 6 </a>  </p>
    </body>
</html>

Début de la valeur d'attribut

On souhaite maintenant sélectionner tous les éléments ayant un attibut donné dont la valeur débute par une valeur donnée.

Ci-dessous, on sélectionne par exemple toutes les ancres dont la valeur commence par http (ce qui revient à sélectionner les ancres définissant un lien externe au site).

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> début  </title>
        <style>
         a[href^="http"]{
            background-color: yellow;
         }
        </style>
    </head>
    <body>
          <p>  <a href="cours_1.html" target="_blank"> lien 1 </a> et  <a href="https://www.google.fr/" target="_blank"> lien 2 </a> </p>
          <p>   <a href="http://www.w3schools.com/" target="_blank"> lien 3</a> et  <a href="#" target="_blank"> lien 4 </a>  </p>
          <p>   <a href="color/cours.html" target="_blank"> lien 5</a>    </p>
    </body>
</html>

Fin de la valeur d'attribut

On souhaite maintenant sélectionner tous les éléments ayant un attribut donné dont la valeur termine par une valeur donnée.

Ci-dessous, on sélectionne par exemple toutes les images dont l'attribut src termine par .png (ce qui revient à sélectionner les images png).

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> fin  </title>
        <style>
        /* encadrant vert ne concernant que les img dont l'attribut src termine par .png */
         img[src$=".png"]{
            border: 2px solid green;
         }
        </style>
    </head>
    <body> 
		<p>
           <img src="images/image1.png" alt="image 1">
           <img src="images/image2.jpeg" alt="image 2">
           
			<br>
			   Les deux images suivantes n'existent pas dans le répertoire ciblé. 
			   Seul le texte alternatif s'affiche : 
			<br>
			
           <img src="images/image3.png" alt="image 3">
           <img src="images/image4.gif" alt="image 4">
        </p>
    </body>
</html>

La valeur d'attribut contient une valeur

On souhaite maintenant sélectionner tous les éléments ayant un attribut donné dont la valeur contient une valeur donnée.

Ci-dessous, on sélectionne par exemple toutes les images dont l'attribut alt contient le mot France.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> fin  </title>
        <style>
        /* encadrant vert ne concernant que les img dont l'attribut alt contient le mot France */
         img[alt*="France"]{
            border: 2px solid green;
         }
        </style>
    </head>
    <body> 
           <img src="images/image1.png" alt="image 1">
           <img src="images/image2.jpeg" alt="départements de France">
           
           <img src="images/image3.png" alt="image 3">
           <img src="images/route.jpg" alt="France routes"  width="240">
    </body>
</html>