Comment cibler des éléments avec un atsortingbut qui a une valeur quelconque dans CSS?

Je sais que je peux cibler des éléments qui ont un atsortingbut spécifique dans CSS, par exemple:

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

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

À peu près quelque chose comme:

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

Qui devrait cibler les premier et troisième balises dans ce code HTML:

 red text standard text red text again 

Je pense que c’est possible car, par défaut, le cursor: pointer semble être appliqué à toute balise ayant une valeur pour son atsortingbut href .

Ce qui suit correspond à tout nchor avec un rel défini:

 a[rel] { color: red; } 

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

Oui, dans les sélecteurs CSS 3, il existe plusieurs sélecteurs d’atsortingbuts .

Par exemple

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

[att = val] Représente un élément avec l’atsortingbut att dont la valeur est exactement “val”.

[att ~ = val] Représente un élément avec l’atsortingbut 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). Si “val” est la chaîne vide, elle ne représentera jamais rien.

[att ^ = val] Représente un élément avec l’atsortingbut 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’atsortingbut 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’atsortingbut 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.

Devrait append que si un navigateur définit un atsortingbut par défaut, vous devrez peut-être contourner ce problème. Cela ne semble pas être un problème dans les brosers “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 dans une table, de sorte que toute cellule unique a la valeur cachée de colspan de 1.

Donc, si vous ciblez “n’importe quel atsortingbut TD avec colspan” que vous appliquez dans votre webdoc, même le td n’ayant pas d’atsortingbut colspan, tel que n’importe quel TD étant une seule cellule, recevra le style css. IE moins de 9 sera fondamentalement tous les styles!

La seule raison de s’inquiéter de cela est que tous les utilisateurs XP restants ne peuvent pas effectuer une mise à niveau supérieure à IE8.

Donc, par exemple, j’ai un groupe de tables 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 veux appliquer une couleur à toutes les cellules vides à la fin ou au début en utilisant l’atsortingbut 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 stylés (drôle puisque le style d’atsortingbut conditionnel était supposé supérieur dans IE, mais je digresse …).

Utiliser les travaux suivants sur tous les navigateurs lorsque je mets 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 traiter le problème de manière plus appropriée en utilisant un style conditionnel utilisant “if IE 9” à remplacer. Ce serait la bonne façon de le faire, gardez simplement à l’esprit que vous devez cacher le “css correctement construit” de IElt9 dans le processus, et je pense que la seule façon appropriée 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 peu importe, vous devez toujours considérer et tester si un navigateur applique un atsortingbut automatique lorsqu’il n’en voit aucun, et comment il peut gérer votre syntaxe par défaut pour le style des valeurs d’atsortingbut.

(btw, il ne se trouve pas que colspan figure dans la spécification CSS [à partir de css3], donc cet exemple ne génère aucune erreur de validation.)