Éléments de style HTML avec des attributs spécifiques
Il est possible de coiffer les éléments HTML qui ont des attributs spécifiques ou des valeurs d'attributs.
CSS [attribute] Selector
Le [attribute] sélecteur est utilisé pour sélectionner des éléments avec un attribut spécifié.
L'exemple suivant sélectionne tous les <a> éléments avec un attribut cible:
CSS [attribut = "valeur"] Selector
Le [attribute="value"] sélecteur est utilisé pour sélectionner des éléments avec un attribut et la valeur spécifiée.
L'exemple suivant sélectionne tous les <a> éléments avec un target="_blank" attribut:
CSS [attribute ~ = "valeur"] Selector
Le [attribute~="value"] sélecteur est utilisé pour sélectionner des éléments avec une valeur d'attribut contenant un mot spécifié.
L'exemple suivant sélectionne tous les éléments avec un attribut title qui contient une liste séparée par des espaces de mots, dont l'un est " flower ":
L'exemple ci - dessus correspondra avec des éléments title="flower", title="summer flower" , et title="flower new" , mais pas title="my-flower" ou title="flowers" .
CSS [attribut | = "valeur"] Selector
Le [attribute|="value"] sélecteur est utilisé pour sélectionner des éléments avec l'attribut spécifié en commençant 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 "top" :
Remarque: La valeur doit être un mot entier, que ce soit seul, comme class="top" , ou suivi d'un tiret ( - ) , comme class="top-text" !
CSS [attribute ^ = "valeur"] Selector
Le [attribute^="value"] sélecteur est utilisé pour sélectionner des éléments dont la valeur attribut commence par une valeur spécifiée.
L'exemple suivant sélectionne tous les éléments avec une valeur d'attribut de classe qui commence par "top" :
Remarque: La valeur ne doit pas être un mot entier!
CSS [attribut $ = "valeur"] Selector
Le [attribute$="value"] sélecteur est utilisé pour sélectionner des éléments dont la valeur attribut se termine avec 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: La valeur ne doit pas être un mot entier!
CSS [attribute * = "valeur"] Selector
Le [attribute*="value"] sélecteur est utilisé pour sélectionner des éléments dont la valeur attribut 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: La valeur ne doit pas être un mot entier!
Styling Forms
Les sélecteurs d'attributs peuvent être utiles pour les formes de coiffage sans class ou 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 » Astuce: Visitez notre CSS Forms Tutorial pour plus d' exemples sur la façon de coiffer les formes avec CSS.
Testez-vous avec des exercices!
Exercice 1 » Exercice 2» Exercice 3 » Exercice 4» Exercice 5 » Exercice 6»
Autres exemples de sélecteurs CSS
Utilisez notre CSS Selector Tester pour démontrer les différents sélecteurs.
Pour une référence complète de tous les sélecteurs CSS, s'il vous plaît visitez notre CSS Selectors Référence .