Le Tutoriel de CSS Attribute Selector

CSS Attribute Selector
CSS [Attribute] Selector
CSS [Attribute='value'] Selector
CSS [Attribute~='value'] Selector
CSS [Attribute|='value'] Selector
CSS [Attribute^='value'] Selector
CSS [Attribute$='value'] Selector
CSS [Attribute*='value'] Selector

1. CSS Attribute Selector

CSS Attribute Selector vous aide à sélectionner des éléments en fonction de la valeur de l'attribut donné.

CSS Attribute Selector est l'un des CSS Selector de base, mais il comprend beaucoup de contenu, j'ai donc écrit à ce sujet dans un article séparé. L'autre CSS Selector de base que vous pouvez voir dans l'article ci-dessous:

Le Tutoriel de CSS Selectors de base

2. CSS [Attribute] Selector

CSS [Attribute] Selector vous aide à rechercher des éléments avec un attribut spécifié, et quelle que soit la valeur de cet attribut.

Par exemple, recherchez tous les éléments <a> avec des attributs target (quelle que soit la valeur de cet attribut).

attr-selector-example1.css

a[target] {
   background-color: yellow;
}

attr-selector-example1.html

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8"/>
      <title>CSS [Attribute] Selector</title>
      <link rel="stylesheet" type="text/css" href="attr-selector-example1.css" />
   </head>
   <body>
     <h3>CSS [Attribute] Selector</h3>
     <ul>
         <li><a href="#" target="_blank">HTML Tutorial</a></li>
         <li><a href="#" target="_self">CSS Tutorial</a></li>
         <li><a href="#">Other Tutorial</a></li>
     </ul>
   </body>
</html>

3. CSS [Attribute='value'] Selector

CSS [Attribute='value'] Selector est utilisé pour rechercher des éléments dont les valeurs d'attribut correspondent exactement à une valeur donnée. Selector est "insensible à la casse" (Case-insensitive).

Par exemple, recherchez les éléments <a> dont la valeur Target d'attribut est "_blank". Insensible à la casse (Case-insensitive).

[target="_blank"]
Target	OK?
_blank
_Blank
_BLANK
_Self

attr-selector-example13.css

a[target="_blank"] {
   background-color: yellow;
}

attr-selector-example13.html

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8"/>
      <title>CSS [Attribute="value"] Selector</title>
      <link rel="stylesheet" type="text/css" href="attr-selector-example13.css" />
   </head>
   <body>
     <h3>CSS [Attribute="value"] Selector</h3>
     <p>a[target="_blank"]</p>
     <ul>
         <li><a href="#" target="_blank">HTML Tutorial</a></li>
         <li><a href="#" target="_BLANK">Javascript Tutorial</a></li>
         <li><a href="#" target="_self">CSS Tutorial</a></li>
         <li><a href="#">Other Tutorial</a></li>
     </ul>
     <p><b>Note:</b> For [<i>attribute</i>=<i>value</i>]
       to work in IE8 and earlier, a DOCTYPE must be declared.</p>
   </body>
</html>

4. CSS [Attribute~='value'] Selector

CSS [Attribute~='value'] Selector est utilisé pour rechercher des éléments dont la valeur d'attribut contient un mot spécifié. Selector est "sensible à la casse" (Case-sensitive)..

Par exemple, recherchez tous les éléments <img> dont l'attribut title contient le mot "cat". Remarque: Les mots "cats" dans ce cas sont inappropriés, car "cat" et "cats" sont deux mots différents.

[title~="cat"]
title	OK?
Cute baby cats
A Black cat
A Black Cat
A Black cat(2)
A Black cat-3
A White Cat
Tiger (Belong to the cat family)

attr-selector-example3.css

img[title~="cat"] {
   border: 2px solid green;
   padding:3px;
}
img {
  margin: 5px;
}

attr-selector-example3.html

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8"/>
      <title>CSS [Attribute~="value"] Selector</title>
      <link rel="stylesheet" type="text/css" href="attr-selector-example3.css" />
   </head>
   <body>
     <h3>CSS [Attribute~="value"] Selector</h3>
     <p>img[title~="cat"]</p>
     <img src="pic-cat1.png" title="Cute baby cats"/>
     <img src="pic-cat2.png" title="A Black cat"/>
     <img src="pic-tiger1.png" title="Tiger (Belong to the cat family)"/> 
     <img src="pic-deer1.png" title="A deer stands intently" />
   </body>
</html>

Si vous souhaitez que CSS [Attribute~="value"] Selector soit "insensible à la casse", vous pouvez utiliser la syntaxe de CSS4:

/** Syntax: */
[Attribute~="value" i]

/** Example: */
img[title~="cat" i] {
   border: 2px solid green;
   padding:3px;
}

<img src="pic-cat1.png" title="Cute baby cats"/>

<img src="pic-cat2.png" title="A Black Cat"/> <!-- OK -->

<img src="pic-tiger1.png" title="Tiger (Belong to the cat family)"/> <!-- OK -->

<img src="pic-deer1.png" title="A deer stands intently" />

5. CSS [Attribute|='value'] Selector

CSS [Attribute|='value'] Selector est utilisé pour rechercher des éléments dont les valeurs d'attribut correspondent complètement à la valeur donnée, ou commencent par la valeur donnée et suivent immédiatement le signe moins. (-). Selector est "sensible à la casse" (Case-sensitive).

Par exemple, recherchez les éléments dont la valeur de l'attribut Class est "top" ou commence par "top-".

[class\|="top"]
class	OK?
top
Top
top-text
top-content
left-text top-text

attr-selector-example5.css

*[class|="top"] {
   border: 2px solid green;
   padding:3px;
}

attr-selector-example5.html

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8"/>
      <title>CSS [Attribute|="value"] Selector</title>
      <link rel="stylesheet" type="text/css" href="attr-selector-example5.css" />
   </head>
   <body>
     <h3>CSS [Attribute|="value"] Selector</h3>
     <p>*[class|="top"]</p>
     <h1 class="top">CSS Tutorial</h1>
     <p class="top-text">CSS Selector Tutorial</p>
     <p class="topcontent">....</p>
     <p><b>Note:</b> For [<i>attribute</i>|=<i>value</i>]
       to work in IE8 and earlier, a DOCTYPE must be declared.</p>
   </body>
</html>

Si vous voulez CSS [Attribute | = "value"] Selector "Insensible à la casse" (Case-insensitive), vous pouvez utiliser la syntaxe de CSS4:

/** Syntax: */
[Attribute|="value" i]

/** Example: */
img[class|="top" i] {
   border: 2px solid green;
   padding:3px;
}

<h1 class="top">CSS Tutorial</h1>  <!-- OK -->
<h1 class="Top">CSS Tutorial</h1>  <!-- OK -->

<p class="top-text">CSS Selector Tutorial</p>  <!-- OK -->
<p class="TOP-text">CSS Selector Tutorial</p>  <!-- OK -->
<p class="topcontent">....</p>

6. CSS [Attribute^='value'] Selector

CSS [Attribute^="value"] Selector est utilisé pour rechercher des éléments dont la valeur d'attribut commence par une valeur donnée. Selector est "sensible à la casse" (Case-sensitive)..

Par exemple, recherchez des éléments dont la valeur de l'attribut Class ou commencez par "top".

[class^="top"]
class	OK?
top
Top
top-text
top-content
topcontent
left-text top-text

attr-selector-example7.css

*[class^="top"] {
   border: 2px solid green;
   padding:3px;
}

attr-selector-example7.html

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8"/>
      <title>CSS [Attribute^="value"] Selector</title>
      <link rel="stylesheet" type="text/css" href="attr-selector-example7.css" />
   </head>
   <body>
     <h3>CSS [Attribute^="value"] Selector</h3>
     <p>*[class^="top"]</p>
      <h1 class="top">CSS Tutorial</h1>
      <p class="top-text">CSS Selector Tutorial</p>
      <p class="topcontent">....</p>
     <p><b>Note:</b> For [<i>attribute</i>^=<i>value</i>]
       to work in IE8 and earlier, a DOCTYPE must be declared.</p>
   </body>
</html>

Si vous voulez CSS [Attribute ^ = "value"] Selector "Insensible à la casse" (Case-insensitive), vous pouvez utiliser la syntaxe de CSS4:

/** Syntax: */
[Attribute^="value" i]

/** Example: */
img[class^="top" i] {
   border: 2px solid green;
   padding:3px;
}

<h1 class="top">CSS Tutorial</h1>  <!-- OK -->
<h1 class="Top">CSS Tutorial</h1>  <!-- OK -->

<p class="top-text">CSS Selector Tutorial</p>  <!-- OK -->
<p class="TOP-text">CSS Selector Tutorial</p>  <!-- OK -->

<p class="topcontent">....</p> <!-- OK -->
<p class="footer top">....</p>

7. CSS [Attribute$='value'] Selector

CSS [Attribute$="value"] Selector est utilisé pour rechercher des éléments dont la valeur d'attribut se termine par une valeur donnée. Selector est "sensible à la casse" Case-sensitive)..

Par exemple, recherchez les éléments <a> dont la valeur de l'attribut HREF se termine par ".html".

[href^=".html"]
href	OK?
http://abc.com/java-tutorial.html
http://abc.com/java-tutorial.Html
http://abc.com/java-tutorial.html#chapter1
http://cde.com/css.jsp

attr-selector-example9.css

a[href$=".html"] {
   color: red;
   font-weight: bold;
}

attr-selector-example9.html

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8"/>
      <title>CSS [Attribute$="value"] Selector</title>
      <link rel="stylesheet" type="text/css" href="attr-selector-example9.css" />
   </head>
   <body>
     <h3>CSS [Attribute$="value"] Selector</h3>
     <p>a[href$=".html"]</p>
      <ul>
          <li><a href="http://abc.com/java-tutorial.html">Java Tutorial</a></li>
          <li><a href="http://abc.com/java-tutorial.html#chapter1">Java Chapter 1</a></li>
          <li><a href="http://cde.com/css.jsp">CSS Tutorial</a></li>
          <li><a href="http://other.com/tutorial">Other Tutorial</a></li>
      </ul>
     <p><b>Note:</b> For [<i>attribute</i>$=<i>value</i>]
       to work in IE8 and earlier, a DOCTYPE must be declared.</p>
   </body>
</html>

Si vous voulez CSS [Attribute $ = "value"] Selector "Insensible à la casse" (Case-insensitive), vous pouvez utiliser la syntaxe de CSS4:

/** Syntax: */
[Attribute$="value" i]

/** Example: */
img[href$="html" i] {
    color:red;
    font-weight: bold;
}

<ul>
      <li><a href="http://abc.com/java-tutorial.html">Java Tutorial</a></li> <!-- OK -->
      <li><a href="http://abc.com/java-tutorial.Html">Java Tutorial</a></li> <!-- OK -->
      <li><a href="http://abc.com/java-tutorial.html#chapter1">Java Chapter 1</a></li>
      <li><a href="http://cde.com/css.jsp">CSS Tutorial</a></li>
       <li><a href="http://other.com/tutorial">Other Tutorial</a></li>
</ul>

8. CSS [Attribute*='value'] Selector

CSS [Attribute*="value"] Selector est utilisé pour rechercher des éléments dont la valeur d'attribut contient une valeur donnée. Selector est "sensible à la casse" (Case-sensitive).

Par exemple, recherchez tous les éléments <a> avec l'attribut HREF contenant ".html".

*[href=".html"]**
href	OK?
http://abc.com/java-tutorial.html
http://abc.com/java-tutorial.Html
http://abc.com/java-tutorial.html#chapter1
http://cde.com/css.jsp

attr-selector-example11.css

a[href*=".html"] {
   color: red;
   font-weight: bold;
}

attr-selector-example11.html

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8"/>
      <title>CSS [Attribute*="value"] Selector</title>
      <link rel="stylesheet" type="text/css" href="attr-selector-example11.css" />
   </head>
   <body>
     <h3>CSS [Attribute*="value"] Selector</h3>
     <p>a[href*=".html"]</p>
      <ul>
          <li><a href="http://abc.com/java-tutorial.html">Java Tutorial</a></li>
          <li><a href="http://abc.com/java-tutorial.html#chapter1">Java Chapter 1</a></li>
          <li><a href="http://cde.com/css.jsp">CSS Tutorial</a></li>
          <li><a href="http://other.com/tutorial">Other Tutorial</a></li>
      </ul>
     <p><b>Note:</b> For [<i>attribute</i>*=<i>value</i>]
       to work in IE8 and earlier, a DOCTYPE must be declared.</p>
   </body>
</html>

Si vous voulez CSS [Attribute * = "value"] Selector "Insensible à la casse" (Case-insensitive), vous pouvez utiliser la syntaxe de CSS4:

/** Syntax: */
[Attribute*="value" i]

/** Example: */
img[href*="html" i] {
    color:red;
    font-weight: bold;
}

<ul>
      <li><a href="http://abc.com/java-tutorial.html">Java Tutorial</a></li> <!-- OK -->
      <li><a href="http://abc.com/java-tutorial.Html">Java Tutorial</a></li> <!-- OK -->
      <li><a href="http://abc.com/java-tutorial.html#chapter1">Java Chapter 1</a></li>
      <li><a href="http://cde.com/css.jsp">CSS Tutorial</a></li>
       <li><a href="http://other.com/tutorial">Other Tutorial</a></li>
</ul>