Comment cibler des éléments avec un attribut ayant une valeur quelconque en CSS ?

Question

Je sais que je peux cibler les éléments qui ont une valeur de spécifique en CSS, par exemple :

input[type=text]
{
    font-family: Consolas;
}

Mais est-il possible de cibler des éléments qui ont un attribut de n'importe quelle valeur (sauf rien, c'est-à-dire lorsque l'attribut n'a pas été ajouté à l'élément) ?

En gros, quelque chose comme :

a[rel=*]
{
    color: red;
}

qui devrait viser les premier et troisième <a> dans ce code HTML :

<a href="#" rel="eg">red text</a>
<a href="#">standard text</a>
<a href="#" rel="more">red text again</a>

Je pense que c'est possible parce que par défaut, cursor: pointer semble s'appliquer à toute <a> qui a une valeur pour sa balise href attribut.

Answer 1

Le texte suivant correspondra à n'importe quelle balise d'ancrage avec une balise rel défini :

a[rel]
{
    color: red;
}

http://www.w3.org/TR/CSS2/selector.html#pattern-matching

---

Mise à jour : Pour tenir compte du scénario mentionné par @vsync, dans la section des commentaires (différenciation entre les valeurs vides et non vides), vous pourriez incorporer le CSS :not pseudo-classe :

a[rel]:not([rel=""])
{
    color: red;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/:not

Answer 2

Oui, dans les sélecteurs CSS 3, il y a plusieurs sélecteurs d'attributs .

Par exemple

[att] Représente un élément avec l'attribut att, quelle que soit la valeur de l'attribut.

[att=val] Représente un élément avec l'attribut att dont la valeur est exactement "val".

[att~=val] Représente un élément avec l'attribut att dont la valeur est une liste de mots séparés par des espaces blancs, dont l'un est exactement "val". Si "val" contient des espaces, il ne sera pas pris en compte. "val" contient des espaces, il ne représentera jamais rien (puisque les mots sont séparés par des espaces). sont séparés par des espaces). De même, si "val" est la chaîne vide, elle ne représentera jamais rien.

[att^=val] Représente un élément avec l'attribut att dont la valeur commence par le préfixe "val". Si "val" est une chaîne vide, le sélecteur ne représente rien.

[att$=val] Représente un élément avec l'attribut att dont la valeur se termine par le suffixe "val". Si "val" est une chaîne vide, le sélecteur ne ne représente rien.

[att*=val] Représente un élément avec l'attribut att dont la valeur contient au moins une instance de la chaîne de caractères "val". Si "val" est l'élément vide le sélecteur ne représente rien.

Answer 3

Il convient d'ajouter que si un navigateur définit un attribut par défaut, il se peut que vous deviez le contourner. Cela ne semble pas être un problème dans les navigateurs "modernes", mais c'est un problème que j'ai constaté, alors assurez-vous de vérifier les performances entre les navigateurs.

Par exemple, j'ai découvert que dans les versions d'IE antérieures à 9, la valeur colSpan est définie pour tous les TD d'un tableau, de sorte que toute cellule individuelle a la valeur colspan cachée de 1.

Ainsi, si vous ciblez "tout TD avec l'attribut colspan" que vous appliquez dans votre webdoc, même les td n'ayant pas d'attribut colspan défini, comme tout TD étant une cellule unique, recevront le style css. IE moins de 9 les stylisera tous !

La seule raison de s'inquiéter est que tous les utilisateurs XP restants ne peuvent pas passer à IE8.

Par exemple, j'ai un groupe de tableaux dont le contenu peut se déplacer d'un bout à l'autre, laissant entre 1 et 7 cellules vides à la fin ou au début.

Je souhaite appliquer une couleur aux cellules vides à la fin ou au début en utilisant l'attribut colspan. L'utilisation de ce qui suit ne fonctionnera pas dans IE moins de 9

#my td[colspan] {background-color:blue;}

...tous les TD seront stylisés (ce qui est amusant puisque le stylisme des attributs conditionnels était censé être supérieur dans IE, mais je m'éloigne du sujet...).

L'utilisation de ce qui suit fonctionne dans tous les navigateurs lorsque je fixe la valeur de colspan à "single" pour toute cellule/TD solitaire que je souhaite inclure dans le schéma de style, mais il s'agit d'un "hack" qui ne validera pas correctement...

#my td[colspan="single"] {background-color:blue;} /* 'single' could be anything */
#my td[colspan="2"] {background-color:blue;}
#my td[colspan="3"] {background-color:blue;}
#my td[colspan="4"] {background-color:blue;}
#my td[colspan="5"] {background-color:blue;}
#my td[colspan="6"] {background-color:blue;}
#my td[colspan="7"] {background-color:blue;}

Par ailleurs, vous devriez être en mesure de résoudre le problème de manière plus appropriée en utilisant un style conditionnel et en utilisant "if lt IE 9" pour l'ignorer. Ce serait la bonne façon de procéder, mais il faut garder à l'esprit qu'il faut cacher la "css correctement construite" à IElt9 dans le processus, et je pense que la seule façon correcte de le faire est d'utiliser des feuilles de style sélectives.

La plupart d'entre nous le font déjà de toute façon, mais quoi qu'il en soit, vous feriez bien de considérer et de tester si un navigateur applique un attribut automatique alors qu'il n'en voit aucun, et comment il peut gérer votre syntaxe, par ailleurs correcte, pour le style des valeurs d'attribut.

(btw, il se trouve que colspan ne figure pas encore dans la spécification css [à partir de css3], de sorte que cet exemple ne provoque pas d'erreur de validation).