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

Je sais que je peux cibler des éléments qui ont un attribut 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)?

À peu près quelque chose comme:

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

Qui devrait cibler les première et troisième <a>balises de ce code HTML:

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

Je suppose que c'est possible car, par défaut, cursor: pointersemble être appliqué à toute <a>balise qui a une valeur pour son hrefattribut.

Ce qui suit correspondra à toute balise d'ancrage avec un relattribut défini:

a[rel]
{
    color: red;
}

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

Mise à jour: Pour tenir compte du scénario @vsync mentionné, dans la section commentaire (différenciation entre les valeurs emtpy / non vides), vous pouvez incorporer la :not pseudo-classe CSS :

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

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

Oui, dans les sélecteurs CSS 3, il existe 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, dont l'un est exactement "val". Si "val" contient des espaces, il ne représentera jamais rien (puisque les mots sont séparés par des espaces). De plus, 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 la 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 la chaîne vide, le sélecteur 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 sous-chaîne "val". Si "val" est la chaîne vide, le sélecteur ne représente rien.

Doit ajouter que si un navigateur définit un attribut par défaut, vous devrez peut-être contourner. Cela ne semble pas être un problème dans les navigateurs "modernes", cependant, c'est un problème que j'ai vu, alors assurez-vous de vérifier les performances entre les navigateurs.

Par exemple, j'ai découvert que dans IE avant 9, colSpan est défini pour tous les TD d'une table, de sorte que chaque cellule a la valeur colspan cachée de 1.

Donc, si vous ciblez "n'importe quel TD avec l'attribut colspan" que vous appliquez dans votre webdoc, même les td n'ayant pas de jeu d'attributs colspan, comme tout TD étant une seule cellule, recevront le style css. IE moins de 9 les styliseront tous!

La seule raison de s'inquiéter à ce sujet est tous les utilisateurs XP restants qui ne peuvent pas mettre à niveau au-dessus d'IE8.

Ainsi, par exemple, j'ai un groupe de tableaux où le contenu peut se déplacer de bout en bout, laissant entre 1 et 7 cellules vides à la fin ou au début.

Je souhaite appliquer une couleur à toutes les 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 (drôle puisque le style d'attribut conditionnel était censé être supérieur dans IE, mais je m'éloigne du sujet ...).

L'utilisation de ce qui suit fonctionne sur tous les navigateurs lorsque je règle la valeur de colspan sur `` single '' pour toute cellule solitaire / TD que je souhaite inclure dans le schéma de style, mais c'est un `` hack '' et 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;}

Sinon, vous devriez être en mesure de résoudre le problème de manière plus appropriée en utilisant un style conditionnel en utilisant "if lt IE 9" pour remplacer. Ce serait la bonne façon de faire cela, gardez simplement à l'esprit que vous devez cacher le "css correctement construit" à IElt9 dans le processus, et je pense que la seule bonne façon 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 faites toujours bien de considérer et de tester si un navigateur applique un attribut automatique lorsqu'il n'en voit aucun, et comment il peut gérer votre syntaxe par ailleurs correcte pour le style des valeurs d'attribut.

(btw, colspan se trouve juste ne pas être dans la spécification css encore [à partir de css3], donc cet exemple ne renvoie aucune erreur de validation.)