« Le langage CSS/Les sélecteurs » : différence entre les versions
Contenu supprimé Contenu ajouté
Ligne 109 :
Les autres attributs sont référençables en spécifiant le nom de l'attribut entre crochets.
<nowiki>[nom_attribut]</nowiki>
Exemple avec une balise input avec attribut "name" :
Ligne 136 :
La syntaxe précédente ne spécifie pas quelle valeur doit avoir l'attribut.
Il suffit juste qu'il soit spécifié.
On peut cependant ajouter la valeur après un signe égal :
<syntaxhighlight lang="css">
Ligne 145 ⟶ 146 :
</syntaxhighlight>
Il y a différentes syntaxes pour sélectionner des éléments par leur attributs :
{| class="wikitable"
! Syntaxe
! Exemple
! Description
|-
| <code><nowiki>[</nowiki>''attr'']</code>
| <syntaxhighlight lang="css" inline>[style]</syntaxhighlight>
| Les éléments ayant un attribut nommé "''attr''" est spécifié.
|-
| <code><nowiki>[</nowiki>''attr''=''valeur'']</code>
| <syntaxhighlight lang="css" inline>[style="color:red;"]</syntaxhighlight>
| Les éléments ayant un attribut nommé "''attr''" valant ''valeur'' (les guillemets autour de la valeur sont recommandés particulièrement si elle contient des caractères spéciaux ou des espaces).
|-
| <code><nowiki>[</nowiki>''attr''*=''partie_de_valeur'']</code>
| <syntaxhighlight lang="css" inline>[style*="color:"]</syntaxhighlight>
| Les éléments ayant un attribut nommé "''attr''" dont la valeur contient ''partie_de_valeur''.
|-
| <code><nowiki>[</nowiki>''attr''^=''partie_de_valeur'']</code>
| <syntaxhighlight lang="css" inline>[style^="color:"]</syntaxhighlight>
| Les éléments ayant un attribut nommé "''attr''" dont la valeur commence par ''partie_de_valeur''. Mnémotechnique : Le caractère <code>^</code> devant le signe égal rappelle celui employé dans les expressions régulières.
|-
| <code><nowiki>[</nowiki>''attr''$=''partie_de_valeur'']</code>
| <syntaxhighlight lang="css" inline>[style$="red;"]</syntaxhighlight>
| Les éléments ayant un attribut nommé "''attr''" dont la valeur se termine par ''partie_de_valeur''. Mnémotechnique : Le caractère <code>$</code> devant le signe égal rappelle celui employé dans les expressions régulières.
|-
| <code><nowiki>[</nowiki>''attr''<nowiki>|</nowiki>=''item'']</code>
| <syntaxhighlight lang="css" inline>[exemple|="local"]</syntaxhighlight>
| Les éléments ayant un attribut nommé "''attr''" dont la valeur commence par l'item ''item''.
|-
| <code><nowiki>[</nowiki>''attr''~=''item'']</code>
| <syntaxhighlight lang="css" inline>[exemple~="local"]</syntaxhighlight>
| Les éléments ayant un attribut nommé "''attr''" dont la valeur contient le mot ''item''.
|}
* [http://www.yoyodesign.org/doc/w3c/css2/selector.html#attribute-selectors La syntaxe complète des sélecteurs d'attributs]
| |||