Sélecteur d'attribut CSS


Table des matières

    Afficher la table des matières


Styler les éléments HTML avec des attributs spécifiques

Il est possible de styliser les éléments HTML qui ont des attributs ou des valeurs d'attribut spécifiques.


Sélecteur CSS [attribut]

Le sélecteur [attribute] est utilisé pour sélectionner des éléments avec un attribut.

L'exemple suivant sélectionne tous les éléments <a> avec un attribut cible :

Exemple

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

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
a[target] {
  background-color: yellow;
}
</style>
</head>
<body>

<h2>CSS [attribute] Selector</h2>
<p>The links with a target attribute gets a yellow background:</p>

<a href="https://www.w3schools.com">w3schools.com</a>
<a href="http://www.disney.com" target="_blank">disney.com</a>
<a href="http://www.wikipedia.org" target="_top">wikipedia.org</a>

</body>
</html>



Sélecteur CSS [attribute="value"]

Le sélecteur [attribute="value"] est utilisé pour sélectionner des éléments avec un attribut et valeur.

L'exemple suivant sélectionne tous les éléments <a> avec un attribut target="_blank" :

Exemple

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

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
a[target="_blank"] {
  background-color: yellow;
}
</style>
</head>
<body>

<h2>CSS [attribute="value"] Selector</h2>
<p>The link with target="_blank" gets a yellow background:</p>

<a href="https://www.w3schools.com">w3schools.com</a>
<a href="http://www.disney.com" target="_blank">disney.com</a>
<a href="http://www.wikipedia.org" target="_top">wikipedia.org</a>

</body>
</html>



Sélecteur CSS [attribut~="valeur"]

Le sélecteur [attribute~="value"] permet de sélectionner des éléments avec un attribut valeur contenant un mot spécifié.

L'exemple suivant sélectionne tous les éléments avec un attribut title qui contient une liste de mots séparés par des espaces, dont « fleur » :

Exemple

[title~="flower"] {
  border: 5px solid yellow;
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
[title~="flower"] {
  border: 5px solid yellow;
}
</style>
</head>
<body>

<h2>CSS [attribute~="value"] Selector</h2>
<p>All images with the title attribute containing the word "flower" get a yellow border.</p>

<img src="klematis.jpg" title="klematis flower" width="150" height="113">
<img src="img_flwr.gif" title="flower" width="224" height="162">
<img src="img_tree.gif" title="tree" width="200" height="358">

</body>
</html>


L'exemple ci-dessus fera correspondre les éléments avec title="flower", title="summer flower", et title="flower new", mais pas title="my-flower" ou title="flowers".



Sélecteur CSS [attribut|="valeur"]

Le sélecteur [attribute|="value"] est utilisé pour sélectionner des éléments avec l'attribut spécifié, dont la valeur peut être exactement la valeur spécifiée, ou la valeur spécifiée suivie d'un trait d'union (-).

Remarque : La valeur doit être un mot entier, soit seul, comme class="top", ou suivi d'un trait d'union ( - ), comme class="top-text".

Exemple

[class|="top"] {
  background: yellow;
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
[class|="top"] {
  background: yellow;
}
</style>
</head>
<body>

<h2>CSS [attribute|="value"] Selector</h2>

<h1 class="top-header">Welcome</h1>
<p class="top-text">Hello world!</p>
<p class="topcontent">Are you learning CSS?</p>

</body>
</html>



Sélecteur CSS [attribut ^= "valeur"]

Le sélecteur [attribute^="value"] est utilisé pour sélectionner des éléments avec l'attribut spécifié, dont la valeur commence par la valeur spécifiée.

L'exemple suivant sélectionne tous les éléments avec une valeur d'attribut de classe qui commence par "haut" :

Remarque : Il n'est pas nécessaire que la valeur soit un mot entier !

Exemple

[class^="top"] {
  background: yellow;
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
[class^="top"] {
  background: yellow;
}
</style>
</head>
<body>

<h2>CSS [attribute^="value"] Selector</h2>

<h1 class="top-header">Welcome</h1>
<p class="top-text">Hello world!</p>
<p class="topcontent">Are you learning CSS?</p>

</body>
</html>



Sélecteur CSS [attribut$="value"]

Le sélecteur [attribute$="value"] permet de sélectionner les éléments dont l'attribut la valeur se termine par une valeur spécifiée.

L'exemple suivant sélectionne tous les éléments avec une valeur d'attribut de classe qui se termine par "test" :

Remarque : Il n'est pas nécessaire que la valeur soit un mot entier !

Exemple

[class$="test"] {
  background: yellow;
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style> 
[class$="test"] {
  background: yellow;
}
</style>
</head>
<body>

<h2>CSS [attribute$="value"] Selector</h2>

<div class="first_test">The first div element.</div>
<div class="second">The second div element.</div>
<div class="my-test">The third div element.</div>
<p class="mytest">This is some text in a paragraph.</p>

</body>
</html>



Sélecteur CSS [attribut*="valeur"]

Le sélecteur [attribute*="value"] permet de sélectionner les éléments dont l'attribut value contient une valeur spécifiée.

L'exemple suivant sélectionne tous les éléments avec une valeur d'attribut de classe qui contient "te":

Remarque : Il n'est pas nécessaire que la valeur soit un mot entier !

Exemple

[class*="te"] {
  background: yellow;
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style> 
[class*="te"] {
  background: yellow;
}
</style>
</head>
<body>

<h2>CSS [attribute*="value"] Selector</h2>

<div class="first_test">The first div element.</div>
<div class="second">The second div element.</div>
<div class="my-test">The third div element.</div>
<p class="mytest">This is some text in a paragraph.</p>

</body>
</html>



Formes de style

Les sélecteurs d'attributs peuvent être utiles pour styliser les formulaires sans classe ni ID :

Exemple

input[type="text"]
{
  width: 150px;
   
display: block;
   
margin-bottom: 10px;
   
background-color: yellow;
}

input[type="button"]
{
  width: 120px;
  margin-left: 35px;
  display: block;
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
input[type="text"] {
  width: 150px;
  display: block;
  margin-bottom: 10px;
  background-color: yellow;
}

input[type="button"] {
  width: 120px;
  margin-left: 35px;
  display: block;
}
</style>
</head>
<body>

<h2>Styling Forms</h2>

<form name="input" action="" method="get">
  Firstname:<input type="text" name="Name" value="Peter" size="20">
  Lastname:<input type="text" name="Name" value="Griffin" size="20">
  <input type="button" value="Example Button">
</form>

</body>
</html>


Conseil : Consultez notre didacticiel sur les formulaires CSS pour plus d'exemples sur la façon de styliser les formulaires avec CSS.



Tous les sélecteurs d'attributs CSS

[attribute]

Exemple

[target]

Exemple de description

Sélectionne tous les éléments avec un attribut cible

[attribute=value]

Exemple

[target="_blank"]

Exemple de description

Sélectionne tous les éléments avec target="_blank"

[attribute~=value]

Exemple

[title~="flower"]

Exemple de description

Sélectionne tous les éléments avec un attribut de titre contenant une liste de mots séparés par des espaces, dont « fleur »

[attribute|=value]

Exemple

[lang|="en"]

Exemple de description

Sélectionne tous les éléments avec une valeur d'attribut lang commençant par "en"

[attribute^=value]

Exemple

a[href^="https"]

Exemple de description

Sélectionne tous les éléments <a> avec une valeur d'attribut href commençant par "https"

[attribute$=value]

Exemple

a[href$=".pdf"]

Exemple de description

Sélectionne tous les éléments <a> avec une valeur d'attribut href se terminant par ".pdf"

[attribute*=value]

Exemple

a[href*="w3schools"]

Exemple de description

Sélectionne tous les éléments <a> avec une valeur d'attribut href contenant la sous-chaîne "w3schools"