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.
css
css-selectors
Marty
la source
la source
emptya[rel]:not( [rel=""] )notastuce finit par être non dynamique. J'ai essayé de faire cela pour mettre en évidence lesinputchamps lorsqu'ils avaient des valeurs par rapport à quand ils n'avaient aucune valeur, et il semble qu'une fois la page chargée, le style n'est pas réévalué si une valeur est saisie (ou quand elle est là pour commencer et il est supprimé).Oui, dans les sélecteurs CSS 3, il existe plusieurs sélecteurs d'attributs .
Par exemple
la source
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.)
la source