Lorsque l'on travail avec du css, les designers cible généralement les éléments à partir de leur id ou de leur class . Toutefois vous pouvez cibler des éléments en n'utilisant pas ces deux attributs.

Il y a beaucoup  d'exemples ou l'on peut souhaiter cibler un élément tout en évitant d' utiliser ces deux sélecteurs les plus courant . 

Dans cet article nous allons vous montrer comment cibler des éléments avec du CSS et des attributs 2 exemples qui vont plus loin que les id et class. 

Cibler un élément avec un attribut et sa valeur exacte 

Dans notre premier exemple, nous souhaitions cibler ce champ  avec du CSS :

<input type="text" name="myfield">

Nous pouvons utiliser l' attribut  type  comme sélecteur. Le CSS ressemble à ceci  :

input[type="text"] {
 /* Votre CSS personnalisé à insérer */
}

Nous pouvons aussi utiliser l 'attribut  name comme sélecteur. La clé est de mettre l'attribut et sa valeur exacte entre les crochets à coté du tag name :

input[name="myfield"] {
 /* Votre CSS personnalisé à insérer */
}

Cibler des éléments avec le même attribut et des valeurs similaires 

Dans notre second exemple, nous pouvons avoir quelques éléments partageant le même attribut mais pas exactement la même valeur. 

<input type="text" name="myfield1">
<input type="text" name="yourfield1">
<input type="text" name="myfield2">
<input type="text" name="yourfield2"> 

Ciblons maintenant les champs avec l'attribut  name mais seulement quand la valeur est yourfield:

input[name*="yourfield"] {
 /* Your custom CSS goes here */
}

Le code est très similaire à celui du précédent exemple, cependant notez que nous avons ajouté l'astérix (*) pour cibler tous les éléments  pour lesquels la valeur  name inclue le texte yourfield. le résultat est que les éléments yourfield1 et yourfield2 sont tous les deux ciblés.

Cet article est la traduction de "How to Target Elements in CSS with Attributes"   d'OSTraining.